how to get new col and row on drag stop event in gridster

Question

I am having gridster widget i want to have new col and row after dragging the widget i have written code in drag stop event but it is taking by default 1st li only can any one guide me how to make it dynamic and get for the li which 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);
                    }
                }
           });

score 3 · Answer 1 · answered Jul 11 '15 at 21:37

Gridster draggable 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;

score 0 · Answer 2 · answered Jan 16 '15 at 06:47

I think you are in right direction, when you stop dragging you will get the current LI position not first one.

$(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  `
                }
            }
       });

score 0 · Answer 3 · answered Apr 20 '16 at 09:12

this all didnt help 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 am using the dustmoo fork of gridster.

how to get new col and row on drag stop event in gridster

3 Answers3