Capturing an object that had a modified attribute value

Question

Capturing an object that had a modified attribute value

Navigation

#1 by (0 votes)

0

I have an object that can be updated from a drag-drop interaction with a grid-stack object ( link ). Depending on the update of the object (change of position) an attribute of it is modified. How can I capture the modifications of this specific object. Taking into account only the attribute change.

I can capture the object if the user clicks on it with the "click" event.

$("div.container-fluid").on("click", "div.grid div#view", function() {
    console.log(this);
});

The object to be fetched is in the 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>

The attributes that are modified are: data-gs-y="0" data-gs-width="4". These attributes are changed by a drag drop interaction of the grid-stack component.

Some doubts: Is there an event that captures the click and drag via mouse? Or does gridStack itself have? (I did not find anything in the documentation). Or can you monitor changes (of attributes) in DOM objects automatically?

jquery

asked by anonymous 06.06.2016 / 17:42

1 answer

if to show button or text MySQL how to store a list of IDs in a column?

score 0 · Answer 1

Bruno, you can use the MutationObserver API to catch mutations in the DOM object, including changes to the attributes.

In the example below I created an additional layer called AttributeObserver , this layer will only notice changes in the attibutos, and the callback will be called only when the new value is different from the old one.

// 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>