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

1 に答える 1

2

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

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

私はこのjsFiddleでほとんどの部分を実行しましたが、おそらくgridster.jsがまだベータ版であるためにいくつかのエラーが発生します: http://jsfiddle.net/Ld2zc/11/

于 2014-07-23T11:03:10.507 に答える