javascript - JQuery Sortable の問題 - 最初の「ドラッグ可能な」要素が連携しない (他のすべての要素は連携する)

Question

ソート可能なグリッドが最初の要素を除いて正しく機能しているという問題があり、残りのグリッド要素とは連携したくないようです。私はJS/JQueryに非常に慣れていないので、これがなぜなのか推測できません。

以下は私のJSです...

$(document).ready(function () {

    $(".topic-container").droppable({
        accept: ".draggable"
    });

    $(function () {
        $("#draggable").draggable({
            snap: ".topic-container",
            snapMode: "inner",
            snapTolerance: 10,
            grid: [100, 50],
            revert: "invalid",
            opacity: 0.7,
            refreshPositions: true,
            scroll: true
        });
    });

    $(".topic-container").droppable({
        hoverClass: "droppable-highlight"
    });

    $(".topic-container").droppable({
        tolerance: "pointer"
    });

    $(function () {
        $("#droppable, #droppable2").sortable({
            connectWith: ".topic-container"
        }).disableSelection();
    });

});

そして私のHTML...

<section class="teir-sorter">
    <h2>Teir 1 Categories</h2>
    <div class="topic-container" id="droppable">

       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>
       <div class="topic-card draggable" id="draggable"></div>

  </div>

  <h2>Teir 2 Categories</h2>
  <div class="topic-container" id="droppable2">

  </div>
  </section>

残りの要素が機能しているときに、最初の要素が非常に奇妙に動作する理由がわかりません。それらを 2 番目のドロップ可能領域にドラッグすると、正常に動作し続けます。最初のドロップ可能領域 (id = droppable1) の 1 つのスポットです。ドラッグ可能なアイテムが正しくソートまたはスナップされないだけでなく、それが占めていたスペースが残りのドラッグ可能な要素で使用できなくなります。助言がありますか？ありがとう！