jquery.uiソート可能な問題

Question

ドラッグアンドドロップ機能を使用してネストされたリストを作成しました。私の問題は、各ネストがそれ自体でソートされることです。例：

-first_level
-first_level
 -second_level
 -second_level
-first_level

＆quot;最初のレベル＆quot; 「第2レベル」に入ることはできません。およびその逆。封じ込めオプションを使用してこれを実行できると思いましたが、サイコロはありません。これは、2番目のレベルを最初のレベルから外すことで機能しますが、その逆はできません。

JSとリストの例：

$("#sort_list").sortable({
  containment: '#sort_list',                                             
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});
$(".sub_list").sortable({ 
  containment: 'parent',
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8,
});
$("#sort_list").disableSelection();

<ul id="sort_list">
  <li>one</li>
  <li>two
    <ul class="sub_list">
    <li>sub one</li>
    <li>sub two</li>
    </ul>
  </li>
  <li>three</li>
  <li>four</li>
</ul>   

アイデアはありますか？みんなありがとう！

Answer 1

さて、問題が見つかったようです。私は宣言していました：items： 'li'なので、コンテナ/ソート可能なアイテムとしてULを検出していませんでした。このすべてを考えさせてくれたkarim79に大いに感謝します：）

以下は動作するコードです（基本的には「全員が自分のコンテナにとどまる」と言っています）：

    $("#sort_list").sortable({
      containment: 'parent',                                                                                     
      axis: 'y',
      revert: true,
      opacity: 0.8
    });
    $(".sub_list").sortable({ 
      containment: 'parent',
      axis: 'y',
      revert: true,
      opacity: 0.8,
    });
    $("#sort_list").disableSelection();

    <ul id="sort_list">
      <li>one</li>
      <li>two
        <ul class="sub_list">
        <li>sub one</li>
        <li>sub two</li>
        </ul>
      </li>
      <li>three</li>
      <li>four</li>
    </ul>

「item：li」を取得しましたリストが衝突することを恐れずに、トップリストから包含関係「親」を削除することもできます。

Answer 2

包含オプションに次のような複雑なセレクターを指定してみてください：

$("#sort_list").sortable({
  containment: '#sort_list:not(.sub_list)',                                                                                     
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});

jQuery 1.3+を使用している場合、すべきトリックを実行する：

（マニュアルから）

  

jQuery 1.3以降：not（）もサポート   コンマで区切られたセレクターと   複雑なセレクター、例えば：   ：not（div a）および：not（div、a）。

jQuery Sortableマニュアルには、 containment オプションが記載されています。

  

内へのドラッグの制約   指定された要素の境界-できます   DOM要素、「親」、   「ドキュメント」、「ウィンドウ」、またはjQuery   セレクタ。