CODEWITHSUNDEEP
javascriptjquerywidgetdraggablegridster
user4361326
user4361326

Reputation: 51

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

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

Upvotes: 4

Views: 3307

Answers (3)

Marco
Marco

Reputation: 329

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.

Upvotes: 0

Matthias
Matthias

Reputation: 1162

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;

Upvotes: 3

ferozcoder
ferozcoder

Reputation: 454

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

Upvotes: 0

Related Questions