How to capture an object that has a modified attribute value

Asked

Viewed 301 times

0

I have an object that can be updated from a drag-drop interaction with a grid-stack object (https://github.com/troolee/gridstack.js#questions-and-Answers). Depending on the object update (change of position) an attribute of it is modified. How can I capture the modifications of this specific object. Taking into account only the change of attribute.

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

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

The object to be captured 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.

A few questions: Is there an event that captures the click and drag via mouse? Or does gridStack own? (I found nothing in the documentation). Or monitor changes (of attributes) in DOM objects automatically?

jquery

  • .prop('minhaProp'); - if you explain better by putting together an example I can explain better too.

  • hi Sergio, the problem is not to take the property of an object. But, to know if the object has suffered some modification.

  • Explain the question further. As it is I could not realize that you want to know when the object was modified and I do not know yet what kind of modification and what action/function modifies it.

  • Is it a DOM object or is it a q object you create via code? which element is a div?

  • It is an object of the GIFT: <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>. It can change attributes data-gs-y="0" data-gs-width="4" if user click and drag.

  • @Brunonascimento, follows a JSFiddle with a Mutationnote that should solve your problem: Jsfiddle

Show 1 more comment

1 answer

0

Bruno, you can use the API MutationObserver to capture mutations in the object DOM, among them, changes in attributes.

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

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

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.