如何在gridster中獲取拖拽停止事件的新col和row

Question

我有gridster小部件我希望在拖動小部件之后有新的col和row我已經在拖動停止事件中編寫代碼但是它默認采用1st li只有任何人可以指導我如何使其動態並獲得li被拖了

這是我的代碼

  $(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可拖動停止功能：

stop: function (e, ui) {            
  var test = ui.$player[0].dataset;
  console.log('draggable stop test = ' + JSON.stringify(test));           
}

控制台輸出：

draggable stop test = {"row":"1","col":"5","sizex":"3","sizey":"7"}

即

var newrow = ui.$player[0].dataset.row;
var newcol = ui.$player[0].dataset.col;

Answer 2

我認為你是在正確的方向，當你停止拖動時，你將獲得當前的LI位置而不是第一個。

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

Answer 3

這一切都沒有幫助我，但我發現使用：

    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
    }

給了我想要的東西。 我正在使用gricter的dustmoo fork 。