Get updated positions of all widgets in dragstop event

[iyerananth]

Subject of the issue

How can we get updated positions of all widgets in dragstop event. Getting the updated positions in change event, but change event is firing for gridstack on adding widgets dynamically. I was using the change event to save grid layout. Hence looking at getting updated positions in dragstop event.

Your environment

Using version 0.3.0

• which browser and its version
  Chrome 71

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working demo, you can use this template as a base.

Expected behaviour

Require updated positions of all widgets

Actual behaviour

Getting Updated postion of only widget that has been moved.

[aamir1754]

You can use this method to get updated positions

$('.grid-stack').on('dragstop', function (event, ui) {
GetLayout();
});

function GetLayout() {

var Positions = [];

$('.grid-stack-item.ui-draggable').each(function () {
    var $this = $(this);

    Positions.push({
        x: $this.attr('data-gs-x'),
        y: $this.attr('data-gs-y'),
        w: $this.attr('data-gs-width'),
        h: $this.attr('data-gs-height'),
        content: $($this).html()
    });

});

}

[iyerananth]

@aamir1754 thanks for the reply. Will try it.

[iyerananth]

@aamir1754 apologize for the delayed response. Tried your solution. It did not give the updated position of the widgets that were moved. I called the change event within the dragstop event and that gave the updated positions. I don't know if it is the right way but issue is resolved. Thank you @aamir1754.

[radiolips]

@iyerananth Using the change event is definitely the best way to identify coordinates after a widget has changed position.

[iyerananth]

Thank you @radiolips 👍

[tupham9506]

@radiolips Sorry, can I use "dropped" instead of "change" event? I just want to event fire after I dropped.
This event seem does not fire.

[adumesny]

@tupham9506 please file a separate bug with a jsfiddle for use to take a look, rather than append to this close one. thanks

[tupham9506]

@adumesny Sorry. I will do it.

[jawand]

I am late in the game, but this is a promising solution.

grid.on('dragstop', function (event, el) {
		var serializedFull = grid.save(true, true);
		var serializedData = serializedFull.children;
		console.log(serializedFull);
		console.log(serializedData);
	});

This will return all the grids co-ordinates and its content.

Also, I am using the same solution for resizestop event.

Hope it will help someone else.

cheers!!!😎

[adumesny]

again the change event is what you want...