web-dev-qa-db-ja.com

jQuery UI 1.8.2でソート可能な+ネストされたリスト

この質問はすべてに当てはまりますが、私と同じ問題を抱えている人はいません。

このようなことをすると

$(function(){
    $('#unique-ul').sortable({items:'li'});
});

私はそれが「うまくいく」と期待しています。概して、そうです。任意の<li>を任意のリストから他のリストにドラッグでき、その<li>のすべてのサブリストも一緒にドラッグされます。

ただし、ドラッグするときは、どこにドロップするかについて混乱するようです。 1.8.0を使用した例を次に示します。同じ動作を示します。

http://jsbin.com/ewuxi3/

これについて私が見つけた他のすべての応答は、この動作がjQuery UIによってサポートされていると私に信じさせます。たとえば、1.7に対して登録されたネストされたドラッグ可能要素に関するバグは次のとおりです。 http://dev.jqueryui.com/ticket/43

この問題が発生した人は他にいないので、間違っていることを示唆しています。手がかりはありますか？

jqueryjquery-uijquery-ui-sortable
25
Altreus

これは、ネストされた<li>またはそれを含むものの上にいるかどうかをSortableが実際に認識しないために発生します。 1つの解決策は、次のような構造を使用することです。

<ul>
  <li><div>Item 1</div>
    <ul>
      <li><div>Subitem 1</div></li>
      <li><div>Subitem 2</div></li>
    </ul>
  </li>
  <li><div>Item 2</div></li>
  <li><div>Item 3</div></li>
</ul>

オプションtoleranceElement: '> div'を設定します。なぜそれが文書化されていないのかはわかりませんが、そこにあり、交差を計算するときに<div>のみを考慮するようにSortableに指示しています。

ご興味のある方のために、私は最近 プラグインを開発 を使用してネストされたソートを容易にし、新しいネストされたリストをオンザフライで作成できるようにしています。

78
mjsarfatti