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

【问题标题】：how to connect 3 sortable list by jquery sortable如何通过jquery sortable连接3个可排序列表
【发布时间】：2013-05-20 02:15:31
【问题描述】：

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

我想要这样的功能：

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

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

【问题讨论】：

标签： jquery jquery-ui-sortable

【解决方案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>

【讨论】：

您好，谢谢。但我的问题不同.. 给出了要求 1. 项目应该可以拖动到 list2 和 list3 并且这些项目应该保留在 list1 中，并且 list2 和 list3 中的每个项目都应该是唯一的。在此先感谢您的帮助...