2

この例では、 http://jqueryui.com/sortable/#connect-listsを使用して、異なるリストと同じリストの間でアイテムをドラッグ アンド ドロップできます。

同じリストでのドラッグ アンド ドロップを無効にして、異なるリスト間でのドラッグ アンド ドロップのみを許可することはできますか? どうやって？

4

2 に答える 2

1

これは私がここでできる最高のことです：

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    stop: function(event, ui) {
        if (ui.item[0].parentNode == this) {
            $(this).sortable('cancel');
        }
    }
}).disableSelection();​

デモhttp://jsfiddle.net/dfsq/J6uM5/

于 2012-10-25T10:15:44.323 に答える
0

作業デモ :) http://jsfiddle.net/UnFdU/1/

recieve、、startおよびの3つのイベントの背後に小さなロジックを構築しましたstop。リストが同じリストである場合は常に、ユーザーは別のリストをドロップできない場合は、自分で試してみてください。以下の簡単な説明

  • ユーザーがドラッグを開始すると、次のように表示されstartます。canDropThat = false;

  • recieveアイテムが接続リストから削除された場合、つまり受信がトリガーされた場合にのみトリガーされますmake canDropThat = true;; したがって、ドロップを許可します。

  • 最後stopに、フラグをチェックし、正しいフラグである場合はドロップを許可し、それ以外の場合は拒否します。

それが原因に合うことを願っています:))

コード

$(function() {
    canDropThat = false;
    var sortlists = $("#List1, #List2").sortable({
        tolerance: 'pointer',
        connectWith: '#List1, #List2',
        helper: 'original',
        scroll: true,
        receive: function(event, ui) {
            //Run this code whenever an item is dragged and dropped into this list 
            canDropThat = true;

        },
        start: function(event, ui) {
            canDropThat = false;
        },
        stop: function(event, ui) {
            if (!canDropThat) {
                $(this).sortable('cancel');
            }
        }

    }).on('scroll', function() {
        sortlists.scrollTop($(this).scrollTop());
    });

});​
于 2012-10-25T10:13:15.827 に答える