3

我有两个列表 - A 和 B

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

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

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

在我的情况下，列表 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>
4

1 回答 1

2

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

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

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

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

相关脚本如下：

$("#list_to_process").sortable({
    connectWith: "#categories",
    revert: true
});

$("#categories").sortable({
    revert: true,
    receive: function (evt, ui) {
        if ($('#list_to_process li').length === 0) {
            $('#list_to_process').remove();
        }
    }
});

这是一个工作小提琴：http: //jsfiddle.net/IrvinDominin/JTHsU/2/

于 2013-04-14T15:12:03.483 回答