1

我被 jquery sortable 卡住了。在这里我需要在 3 个列表上实现可排序的连接

我想要这样的功能：

  1. 我可以将 sortable1 列表中的元素拖到 sortable2 和 sortable3 中，其中所有项目在 sortable1 中都将保持不变（即将项目从 sortable1 复制到 sortable2 和 sortable3），并且 sortable2 和 sortable3 也没有相互连接。

  2. 从 sortable1 拖动后， sortable2 和 sortable3 中的项目应该是唯一的。

     <ul id="sortable1" class="connectedSortable">

    <li class="ui-state-default">Item 1</li>

    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>


<ul id="sortable2" class="connectedSortable"></ul>
<ul id="sortable3" class="connectedSortable"></ul>
4

1 回答 1

1

很简单，只要使用 connectWith 属性，

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

例如：

    <html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; width: 200px; height: 200px; border: solid 1px black; }
  #sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script>
      $(function () {
          $("#sortable1").sortable({
              connectWith: "#sortable2, #sortable3"
          }).disableSelection();

          $("#sortable2").sortable({
              connectWith: "#sortable1"
          }).disableSelection();

          $("#sortable3").sortable({
              connectWith: "#sortable1"
          }).disableSelection();
      });
  </script>
</head>
<body>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">

</ul>

 <ul id="sortable3" class="connectedSortable">

</ul>



</body>
</html>
于 2013-05-24T13:18:12.220 回答