jQuery基於條件的可放置

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列表的末尾。 當我將元素從選定的拖放到容器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();
});

您可以在這里進行測試 。

Answer 2

好吧，您可以附加到UL，這意味着它將最終結束。

如果希望將其插入列表中的特定位置，則可能應將LI設置為可丟棄的，而不是UL。

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