jquery - 内部に並べ替え可能なリストを含む JQuery UI の並べ替え可能なセクション (div)

Question

誰かがこのチュートリアル/例を教えてくれることを望んでいました。私はそれが行われたと確信しています。私はそれを見つけていません。セクションまたはカテゴリを表すソート可能なブロック (おそらく div) がある「ネストされた」ソート機能が必要です。

次に、セクション領域内に、並べ替え可能なリストが必要です。

たとえば、次のセクションがあるとします。

Breakfast
  - Cereal
  - Coffee
  - Juice

Lunch 
  - Soup
  - Sandwich

Dinner
  - Stew

朝食、昼食、夕食をドラッグして並べ替え、サブリストを一緒に移動できるようにしたいと考えています。次に、サブリストをどこでもソートできるようにしたいと考えています。明確にするために、必要に応じてコーヒーを朝食エリアからディナーエリアに移動できるようにしたいと考えています。

助けてくれてありがとう。

---

わかりました、間違ったセレクターを使用しただけで、期待どおりに機能しませんでした。デフォルトでは、JQuery UI はまさに私が必要としているものを実行します。これに出くわした人のための私のコードです。

<div id='section-block'>
    <div>
        <span>Section 1</span>
        <ul id="sortable1" class="connectedSortable">
          <li class="ui-state-default">Item 1a</li>
          <li class="ui-state-default">Item 2a</li>
          <li class="ui-state-default">Item 3a</li>
          <li class="ui-state-default">Item 4a</li>
          <li class="ui-state-default">Item 5a</li>
        </ul>
    </div>
    <div>
        <span>Section 2</span>
        <ul id="sortable2" class="connectedSortable">
          <li class="ui-state-highlight">Item 1b</li>
          <li class="ui-state-highlight">Item 2b</li>
          <li class="ui-state-highlight">Item 3b</li>
          <li class="ui-state-highlight">Item 4b</li>
          <li class="ui-state-highlight">Item 5b</li>
        </ul>
    </div>
</div>


<script type="text/javascript">
    $(function() {
        $("#section-block").sortable().disableSelection();

        $("#sortable1, #sortable2").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
</script>