jquery - 如何让列表元素可排序并且也可拖动到另一个列表

Posted 2023-05-08

技术标签:

【中文标题】jquery - 如何让列表元素可排序并且也可拖动到另一个列表【英文标题】：jquery - how to have list elements be sortable and also draggable to another list 【发布时间】：2013-04-06 15:40:57 【问题描述】：

我有两个列表 - A 和 B

我希望列表 B 可以在其内部进行排序。 这行得通。 我希望列表 A 具有可以拖到列表 B 的 LI 元素。这行得通。 我希望列表 A 本身也可以排序。 这不起作用。

由于列表 A 上的 .draggable，它不起作用。如果我删除它，它是可排序的 - 但不能拖动到列表 B。

如何让列表 A LI 元素既可在其自己的列表中排序，又可拖动到另一个（可排序的）列表？

在我的例子中，列表 A 是 ID#list_to_process，列表 B 是 #categories。我认为这个问题本身虽然相当笼统，但其他人可能会面临。

jsfiddle：http://jsfiddle.net/RNHxY/

<html>
  <head>
    <style>
    #categorizer  padding: 2px; 
    #list_to_process, #categories   color: blue; background-color: green; border: solid; border-width: 4px 
    ul  padding: 10px; margin: 50px; float:left; list-style:none; 
    li  color: yellow; padding: 25px 80px; cursor: move; 
    li:nth-child(even)  background-color: #000 
    li:nth-child(odd)  background-color: #666 
  </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
      $(document).ready( function() 
        $("#categories").sortable(
          revert: true,
          receive: function(evt, ui) 
            ui.item.remove();  # Remove the item in the 'from' list.
            # Next 3 lines just there to remove empty UL when no LI's left.
            if ( $('#list_to_process li').length == 0) 
              $('#list_to_process').remove();
            
          
        );
        $("#list_to_process").sortable(
          revert: true  # This isn't working.
        );
        # Below is over-writing the sortable capability of #list_to_process
        $("li.to_process").draggable( 
          connectToSortable: "#categories",
          helper: "clone",
          revert: "invalid"
        );
      );
    </script>

  </head>
  <body>
    <div id="categorizer">
      <ul id="list_to_process">
        <li class="to_process" id="left1">1</li>
        <li class="to_process" id="left2">2</li>
        <li class="to_process" id="left3">3</li>
        <li class="to_process" id="left4">4</li>
        <li class="to_process" id="left5">5</li>
      </ul>
      <ul id="categories">
        <li id="righta">a</li>
        <li id="rightb">b</li>
        <li id="rightc">c</li>
        <li id="rightd">d</li>
        <li id="righte">e</li>
      </ul>
    </div>
  </body>
</html>

【问题讨论】：

如果我理解正确，jsfiddle.net/rFYEC/1 可以解决问题吗？是的，几乎，尽管当没有 LI 时，它不会像上面那样删除空的 UL（#list_to_process#）。可以这样做吗？（我尝试在其中添加receive: 代码，但没有成功）。好的，添加接收；这个小提琴jsfiddle.net/IrvinDominin/JTHsU/1不适合你？是的，请发帖，我会接受的。好的！以前的 cmets 作为答案发布。 【参考方案1】：

您可以使用connectWith 选项来解决问题：

此列表中的项目的其他可排序元素的选择器应该连接到。如果你愿意，这是一种单向关系要在两个方向上连接的项目，connectWith 选项必须在两个可排序元素上设置。

这使您可以链接两个列表并在第一个列表本身、第一个列表和第二个列表之间排序元素。对于第二个列表，sortable 功能就足够了。

参考：http://api.jqueryui.com/sortable/#option-connectWith