Tenho um objeto que pode ser atualizado a partir de uma interação drag-drop com um objeto grid-stack (https://github.com/troolee/gridstack.js#questions-and-answers). Dependendo da atualização do objeto (mudança de posição) um atributo dele é modificado. Como posso capturar as modificações deste objeto específico. Levando em conta somente a mudança do atributo.
Eu consigo capturar o objeto se o usuário clica em cima dele com o evento "click".
$("div.container-fluid").on("click", "div.grid div#view", function() {
console.log(this);
});
O objeto a ser capturado está no DOM:
<div data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> </div>
Os atributos que são modificados são: data-gs-y="0" data-gs-width="4". Esses atributos são alterados por uma interação drag drop do componente grid-stack.
Algumas dúvidas: Existe algum evento que capture o clique e arraste via mouse? Ou o próprio gridStack possui? (eu não encontrei nada na documentação). Ou tem como monitorar mudanças (de atributos) em objetos DOM de forma automática?
.prop('minhaProp');
- se explicares melhor juntando um exemplo posso explicar melhor também.<div data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> </div>
. Ele pode mudar os atributosdata-gs-y="0" data-gs-width="4"
se o usuário clicar e arrastar.