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和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 回答