2013-06-06 78 views
10

如何將一個網格從一個網格拖到另一個網格?如何將網格從一個網格拖到另一個網格?

$(function() { //DOM Ready 

    $(".gridster ul").gridster({ 
     widget_margins: [5, 5], 
     widget_base_dimensions: [160, 160] 
    }); 

    var gridster = $(".gridster ul").gridster().data('gridster'); 
    $(".draggable").draggable(); 
    $(".gridster ").droppable({ 
     drop: function(event, ui) { 
      $(".draggable").removeAttr("style"); 
      gridster.add_widget('<li class="new"></li>', 1, 1);     
     } 
    });       
}); 
+0

有沒有解決這個問題?我一直在努力做到這一點。 – ReSpawN

+4

@Rachanna Panchal看到這個:[stackoverflow](http://stackoverflow.com/a/19458629/1576040) –

+0

有沒有人有關於它的另一個想法? – Pablo

回答

2

您可以使用gridster API的remove_widget和add_widget函數來添加和刪除小部件。

要查看一個小部件是否被拖動,您可以看到鼠標的起始位置是否已從在小部件上按下鼠標器時發生變化,與onmousedown事件相關,直到您釋放點擊時, onmouseup事件。比較開始和結束位置以查看我們是否拖動了一個小部件,然後如果我們確實這樣做了,請檢查我們是否通過將拖放位置與所有Gridster對象的偏移量進行比較來將其拖動到其他一個網格上。如果我們把它扔到任何其他gridsters,只需調用gridster元素是的remove_widget功能並調用gridster的add_widget功能應該插嘴說。

我已經做了大部分在此的jsfiddle,它給出了一些錯誤,可能是因爲gridster.js仍處於測試階段:http://jsfiddle.net/Ld2zc/11/

相關問題