Javascript JQuery可排序问题-第一个“；“可拖动的”；元素不合作（所有其他元素都不合作）

我遇到了一个问题，除了第一个元素外，我的可排序网格工作正常，而第一个元素似乎不想与其他网格元素一起工作。我无法推断这是为什么，因为我对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>

Teir 1类别
Teir 2类

---

我看不出为什么第一个元素在其他元素工作时会表现得如此奇怪。如果我将它们拖到第二个可拖放区域中，它们会继续正常工作，这只是第一个可拖放区域中的一个点（id=droppable1）。不仅可拖动项不能正确排序或捕捉，而且它占用的空间也会被其他可拖动元素无法使用。有什么建议吗？谢谢

我刚一发布，就意识到我所有的可拖动元素都有相同的ID。这可能是问题所在吗？现在检查……是的，这可能是问题，如果你有重复的ID，ID选择器将只考虑带有ID的第一个元素。有趣的是，当我试图使用类选择器与ID选择器时，然后将所有的ID都更改为唯一的，不再有可拖动的元素工作了。因此，我将选择器更改回

“#draggable”

ID，并保持所有ID的唯一性。现在没有一个ID与选择器匹配，而且它工作得很好。因此，我将假设当您将

.sortable

添加到

.dropable

元素时，

.draggable

元素的所有参数都将变得没有意义。（即网格、捕捉、公差等）。有人能证实这一点吗？谢谢