0

2 つの順序付けられていないリストがあります。必要な機能は次のとおりです。1) 左側のペイン (#sortable) はそれ自体でソートできません 2) 右側のパネル (#sortable1) はそれ自体でソートできます 3) 左側のパネルの項目を右側のパネルにドラッグ アンド ドロップできます 4) の項目右側のパネルを左側のパネルにドラッグ アンド ドロップすることはできません。5) ドラッグ中のアイテムには、右側のパネルのアイテム間の任意の場所にドロップできるプレースホルダーが必要です。

現時点では、次のコードは 1,2,3,4 を実行します。5 になると、現在、ドロップされたアイテムは右側のリストの一番上に配置されます (.prepend を使用)。

私が理解できないのは、アイテムをリストのどこにでも（最初や最後だけでなく）ドロップし、アイテムを右側のパネルにドラッグしている間にプレースホルダーを持たせる方法ですか？

Jクエリ

$('#sortable li').draggable({
    cursor: 'pointer',
    connectWith: '#sortable1',
    helper: 'clone',
    opacity: 0.5,
    zIndex: 10
});

$('#sortable1').sortable({
    connectWith: '#sortable',
    cursor: 'pointer',
    containment: '#sortable1'
  }).droppable({
      accept: '#sortable li',
      activeClass: 'highlight',
      drop: function (event, ui) {
          var $li = $('<li>').addClass('ui-state-highlight').html(ui.draggable.html());
      $li.prependTo(this);
      }
    });
});

HTML

<ul id="sortable">
  <li class="ui-state-default" id="4778">Item 1 Right</li>
  <li class="ui-state-default" id="4777">Item 2 Right</li>
  <li class="ui-state-default" id="4773">Item 3 Right</li>
  <li class="ui-state-default" id="4772">Item 4 Right</li>

</ul>

<ul id="sortable1">
  <li class="ui-state-highlight" id="4778">Item 1 Right</li>
  <li class="ui-state-highlight" id="4777">Item 2 Right</li>
  <li class="ui-state-highlight" id="4773">Item 3 Right</li>
  <li class="ui-state-highlight" id="4772">Item 4 Right</li>

</ul>

どんな助けでも大歓迎です。

4

1 に答える 1

0

jquery draggable の connectWith オプションを使用する代わりに、connectToSortable オプションを使用します。これには、現在のコードよりも 2 つの利点があります。

  1. 他の機能に影響を与えることなく、探している必要な機能を取得できます。
  2. #sortable1 をドロップ可能として定義する必要はありません
于 2013-06-24T13:35:06.637 に答える