0

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?

6
  • .prop('minhaProp'); - se explicares melhor juntando um exemplo posso explicar melhor também.
    – Sergio
    Commented 6/06/2016 às 15:44
  • oi Sergio, o problema não é pegar a propriedade de um objeto. Mas, saber se o objeto sofreu alguma modificação. Commented 6/06/2016 às 15:56
  • Explica melhor a pergunta. Como está eu não consegui perceber que queres saber quando o objeto foi modificado e não sei ainda que tipo de modificação e qual a ação/função que o modifica.
    – Sergio
    Commented 6/06/2016 às 16:12
  • É um objeto do DOM ou é um objeto q vc cria via codigo? qual elemento é uma div?
    – Guerra
    Commented 6/06/2016 às 16:12
  • É um objeto do 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>. Ele pode mudar os atributos data-gs-y="0" data-gs-width="4" se o usuário clicar e arrastar. Commented 6/06/2016 às 16:29

1 Resposta 1

0

Bruno, você pode utilizar a API MutationObserver para capturar mutações no objeto DOM, dentre elas, alterações nos atributos.

No exemplo abaixo eu criei uma camada adicional chamada AttributeObserver, esta camada vai observar apenas alterações nos attibutos, e o callback será chamado apenas quando o novo valor for diferente do antigo.

// Classe para observar mutações nos attributos de um determinado elemento.
var AttributeObserver = function (element) {
  var that = this;
  this.element = element;
  this.observer = new MutationObserver(function(mutations) {
    mutations.forEach(function (mutation, indice) {
      var name = mutation.attributeName;
      var event = that.attributes[mutation.attributeName];
      var value = that.element.getAttribute(name);
      if (event && mutation.oldValue != value)
        event(mutation);
    })
  });  
  this.attributes = {};
  this.observer.observe(numero, { attributes: true, attributeOldValue: true });
}

AttributeObserver.prototype.observe = function (attributeName, callback) {
  this.attributes[attributeName] = callback;
}

// Exemplo de utilização.
var numero = document.getElementById("numero");
var observer = new AttributeObserver(numero);
observer.observe("data-primo", function (mutation) {
  var log = { 
    prop: "data-primo", 
    oldValue: mutation.oldValue, 
    newValue: mutation.target.getAttribute("data-primo")
  };
  console.log(JSON.stringify(log));
});

// Alterar attributo monitorado.
window.setInterval(function () {
  var num = parseInt(numero.textContent) + 1;
  numero.dataset.primo = isPrime(num);
  numero.textContent = num;
}, 1000);

// verificar se um numero é primo
function isPrime (n)
{
  if (n < 2) 
    return false;

  var q = Math.floor(Math.sqrt(n));
  for (var i = 2; i <= q; i++)
  {
    if (n % i == 0)
    {
      return false;
    }
  }
  return true;
}
<span id="numero" data-primo="false">1</span>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .