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>

如果您有线索、答案或指导如何实现这一目标，我们将非常感激！

- squirreldev

---

请查看此链接JQFAQ.com。这将为您的问题提供一个很好的答案，还有更多的常见问题解答可供参考。 - Karthi Keyan

@squirreldev：我尝试了评论中提出的答案和建议，但似乎完全不起作用（包括排序和删除）。你找到解决方案了吗？ - Giorgio

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");}
});

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

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

});

- zorro-lp

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();
});

- Twisty