Question

我遇到了jquery sortable。在这里，我需要在3个列表上实现可排序的连接

我想要这样的功能：

我可以将sortable1列表中的元素拖到sortable2和sortable3，其中所有项目在sortable1中保持相同（即从sortable1复制到sortable2和sortable3），sortable2和sortable3也不相互连接。 / p>

从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>

Answer 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>

如何通过jquery sortable连接3个可排序列表

1 个答案: