jQuery 可排序和可放置列表

Question

所以我正在尋找的是一種讓我在同一個元素上同時使用可排序和可放置的方法。 假設我有一個包含 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>

這是您的 UL 的sortable代碼。 您需要配置change事件。 排序事件發生時發生更改事件，否則表示丟棄事件發生。

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

在 droppable 代碼中，檢查是否發生更改，如果沒有，則表示已刪除。

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

});

Answer 2

考慮到您可以在不使用 Droppable 的情況下執行此操作。 它可以通過connectWith來完成。 它只需要在那里添加第二個列表。

 $(function() { $(".sort").sortable({ connectWith: ".sort", handle: "span.ui-icon", placeholder: "ui-state-highlight" }); $("#sortable").disableSelection(); });

 .top, .child { list-style-type: none; margin: 0; padding: 0; width: 60%; } .child { padding-bottom: 0.5em; } .top li { margin: 0 3px 3px 3px; padding: 0.4em; } .top li span { margin: 3px; cursor: grab; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <ul class="sort top"> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 1 <ul class="sort child"> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 1.1</li> </ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 2 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 3 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 4 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 5 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 6 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 7 <ul class="sort child"></ul> </li> </ul>

如果需要，您可以創建一個函數，在初始化時為您附加所有這些。

$(function() {
  function makeChildLists(target, class){
    $("li", target).each(function(i, el){
      $("<ul>", {
        class: "child " + class
      }).appendTo(el)
    });
  }

  makeChildLists($(".top"), "sort");
  
  $(".sort").sortable({
    connectWith: ".sort",
    handle: "span.ui-icon",
    placeholder: "ui-state-highlight"
  });
  $("#sortable").disableSelection();
});