グリッドをあるグリッドスターから別のグリッドスターにドラッグするにはどうすればよいですか？

Question

グリッドを別のグリッドスターにドラッグするにはどうすればよいですか？

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

Answer 1

gridster APIのremove_widgetおよびadd_widget関数を使用してウィジェットを追加および削除できます。

ウィジェットがドラッグされているかどうかを確認するには、ウィジェットをマウスの下に押したときから、onmousedownイベントを使用してマウスの開始位置が変更されたかどうかを確認できます。 onmouseupイベント。開始位置と終了位置を比較してウィジェットをドラッグしたかどうかを確認したら、ドロップ位置とすべてのグリッドオブジェクトのオフセットを比較して、ウィジェットを他のグリッドのいずれかにドラッグしたかどうかを確認します。他のグリッターに落とした場合は、その要素が入っていたグリッターのremove_widget関数を呼び出して、グリッターのadd_widget関数を呼び出してください。

私はこのjsFiddleで最も多くの作業をしましたが、おそらくgridster.jsがまだベータ版であるためにいくつかのエラーが発生します：http://jsfiddle.net/Ld2zc/11/