jQuery 可排序和可放置列表

Posted 2023-05-08

【中文标题】jQuery 可排序和可放置列表

【英文标题】：jQuery sortable and droppable list

【发布时间】：2012-11-24 13:48:02

【问题描述】：

所以我正在寻找的是一种让我在同一个元素上同时使用可排序和可放置的方法。 假设我有一个包含 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>

如果您知道如何执行此操作的答案或指南，我们将不胜感激！

【问题讨论】：

看看这个链接JQFAQ.com。这将为您的问题提供一个很好的答案，并且还有更多常见问题解答。

@squirreldev：我已经尝试了评论中提出的答案和建议，但似乎并不完全有效（排序和放入）。你找到解决办法了吗？

【参考方案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 事件。当 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");
);

在droppable代码中，检查是否发生变化，如果没有，则表示dropp。

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

);

【参考方案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();
);