How to get coordinates, which actually changed

[vadus1]

When I change the position of the widget, such as drag two widgets. Using the event 'change' to get these updated widgets.
I make a condition, which checks the changed position.
so . if (stack_item.data('gs-x') != items[i].x || stack_item.data('gs-y') != items[i].y) {
I reload the page. Change position of the widget, and nothing happens. Then again change the position of the same widget and I gets position.

why? How to get coordinates, which actually changed?

$(document).on('change', '.grid-stack', function(event, items) {
  var updated_widgets = {};
  for (var i = 0; i < items.length; i++) {
    var widget = items[i].el.find('.dashboard-widget');
    var stack_item = widget.parent();
    // Let's see if cordinates actually changed
    // (this change event reports changes even when nothing changed)
    if (stack_item.data('gs-x') != items[i].x || stack_item.data('gs-y') != items[i].y) {
      updated_widgets[widget.data('widget-id')] = {
        'x': items[i].x,
        'y': items[i].y
      }
    }
  }

[radiolips]

As seen in this fiddle https://jsfiddle.net/9tga7oam/39/ , both widgets are returned for every resize/move rather than just the affected widget.

[kstan79]

I think this callback check DOM variable which is not immediately effect, i'm overcome this by delay 50ms:

$('.grid-stack').on('resizestop', function(event, ui)
{
var element = event.target;
var uuid=$(element).find('.bi2_element_body').attr('id')
// need wait a while
setTimeout(function()
{
console.log($(element).attr('data-gs-width')); //replace width to height, x,y
},50);

});

[adumesny]

closing as change callback happens only to what actually changed, and after the dom gs- attributes have been updated.