jQuery可排序和可放置列表

Question

所以我正在寻找的是一种让我在同一元素上使用sortable和droppable的方法.假设我有一个包含5个元素的列表,这些元素都是可排序的.我要做的是当一个元素被删除到另一个元素的顶部时,它将附加到该元素并退出列表,例如:

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

元素已被删除

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item 
        <ul>
              <li>List Item Dropped</li>
        </ul>
    </li>

</ul>

如果你有一个线索,如何做到这一点的答案或指南将非常感谢!

Answer 1

HTML：

<ul id="theUL">
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
</ul>

这是sortable您的 UL 代码。您需要配置该change事件。当sort事件发生时，change事件发生，否则，表示drop事件发生。

$("#theUL").sortable({
    revert: true,
    items: "li",
    change: function( event, ui ) {ui.helper.addClass("change");},
    beforeStop: function( event, ui ) {ui.helper.removeClass("change");}
});

在可删除的代码中，检查是否发生更改，如果没有，则意味着已删除。

$(".item" ).droppable({
    accept: function(el) {
        return el.hasClass('item');
    },
    drop: function (event, ui) {
        item=ui.draggable;
        if(!item.hasClass('change')){
            //dropped!
        }
    }

});