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);
                    }
                }
           });

Answer 1

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;