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 に答える