基于条件的jquery droppable答案

【问题标题】：jquery droppable based on condition基于条件的jquery droppable
【发布时间】：2010-11-29 13:19:09
【问题描述】：

下面是我的代码。

$(document).ready(function(){
    $("#container li").draggable({ revert: 'invalid' });
    var total = 0;
    $("#selected ul").droppable({
        drop: function(e, ui) {
            $(ui.draggable).css({ top: 0, left:  0 }).appendTo(this);
        },
        accept: function() {
            return $("#selected li").length < 5;
        },
        placeholder: true
    });
    $("#container ul").droppable({
        drop: function(e, ui) {
            $(ui.draggable).css({ top: 0, left:  0 }).appendTo(this);
        },
        placeholder: true
    });
});

这就像我们可以将 LI 元素从容器 div 拖放到选定的 div 中，反之亦然。一切正常，但拖放的 LI 元素未排序。我的意思是，如果我将一个 LI 元素从容器中拖放到选中状态，它总是会移动到 LI 列表的末尾。当我将元素从选定内容拖放到容器 div 时，也会发生同样的情况。

那么我应该怎么做才能使 LI 可排序？

这里是链接：http://www.jsfiddle.net/nick_craver/HemSU/1/

请帮助解决这个问题。谢谢。

【问题讨论】：

也许你想看看 jQuery UI 'Sortable'：jqueryui.com/demos/sortable

标签： javascript jquery jquery-ui jquery-plugins

【解决方案1】：

对于您所追求的（与原始问题非常不同），.sortable() 会更合适，如下所示：

$(document).ready(function(){
    function checkMax() {
        var max = $("#selected li").length >= 5;
        $("#container ul").sortable("option", { 
            revert: max, connectWith: max ? '' : '#selected ul'
        });
    }
    $("#selected ul").sortable({
        connectWith: '#container ul',
        receive: checkMax
    }).disableSelection();
    $("#container ul").sortable({
        connectWith: '#selected ul',
        receive: checkMax
    }).disableSelection();
});

You can test it out here.

【讨论】：

【解决方案2】：

好吧，你附加到 UL，这意味着它将最后结束。

如果您希望能够将其插入列表中的特定位置，您可能应该将 LI 设置为可放置的，而不是 UL。

然后用户在该 LI 之前插入而不是附加到。

【讨论】：