How to get new col and row on drag stop event in gridster
I have a grid widget. I want the new col and row after dragging the widget i write the code in the drag stop event but it accepts by default the 1st whether only one can help me how to make it dynamic and get for the li that is dragged
here is my code
$(function () {
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
animate: true,
draggable:
{
enabled: true,
start: function(e, ui, $widget)
{
log.innerHTML = 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
},
drag: function(e, ui, $widget)
{
log.innerHTML = 'DRAG offset: ' + ui.pointer.diff_top + ' ' + ui.pointer.diff_left + "<br >" + log.innerHTML;
},
stop: function(e, ui, $widget)
{
log.innerHTML = 'Stop position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
var newpos = this.serialize($widget)[0];
alert("New col: " + newpos.col + " New row: " + newpos.row);
}
}
});
+3
source to share
3 answers
Gridster drag stop function:
stop: function (e, ui) {
var test = ui.$player[0].dataset;
console.log('draggable stop test = ' + JSON.stringify(test));
}
Console output:
draggable stop test = {"row":"1","col":"5","sizex":"3","sizey":"7"}
i.e.
var newrow = ui.$player[0].dataset.row;
var newcol = ui.$player[0].dataset.col;
+3
source to share
I think you are in the right direction, when you stop dragging, you will not get the current LI position first.
$(function () {
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
animate: true,
draggable:
{
enabled: true,
start: function(e, ui, $widget)
{
log.innerHTML = 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
},
drag: function(e, ui, $widget)
{
log.innerHTML = 'DRAG offset: ' + ui.pointer.diff_top + ' ' + ui.pointer.diff_left + "<br >" + log.innerHTML;
},
stop: function(e, ui, $widget)
{
log.innerHTML = 'Stop position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
var newpos = this.serialize($widget)[0];
alert("New col: " + newpos.col + " New row: " + newpos.row);`// THIS WILL BE YOUR NEW COL and ROW `
}
}
});
0
source to share
none of this worked for me, but I found that using:
stop: function(e, ui, $widget) {
console.log(this.player_grid_data.col); //shows the column
console.log(this.player_grid_data.row); //shows the row
console.log(JSON.stringify(this.player_grid_data)); //all the data
}
gave me what I wanted. I use a mesh vacuum cleaner fork .
0
source to share