0

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

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

4

0 回答 0