Question

以下是我的代码。

$(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列表的末尾。当我将元素从selected中删除到容器div时也会发生同样的情况。

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

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

请解决此问题需要帮助。感谢。

Answer 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

Answer 2

你附加到UL，这意味着它最终会结束。

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

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

基于条件的jquery droppable

2 个答案: