javascript - 将多个 div 拖入另一个 jQuery

Question

我一直在尝试使用 jQuery 将 div 从一个 div 拖到另一个。这是我到目前为止所得到的

$(document).ready(function() {
  $(".draggable").draggable();
  $(".bucket").droppable({
    drop: function(event, ui) {
      if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
        ui.draggable.attr("data-bucket", $(this).attr('id'));

        var p1 = ui.draggable.parent().offset();
        $(this).append(ui.draggable);

        var p2 = ui.draggable.parent().offset();

        ui.draggable.css({
          top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
          left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
        });
      }
    }
  });
});

.bucket {
  width: 400px;
  height: 150px;
  background: #ddd
}

.draggable {
  width: 50px;
  height: 30px;
  margin-top: 5px;
  background: red;
}

#destination {
  background: #aaa
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
  <div class="draggable" data-bucket="origin">Drop 1</div>
  <div class="draggable" data-bucket="origin">Drop 2</div>
  <div class="draggable" data-bucket="origin">Drop 3</div>
  <div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>

我已经从this 改编了js答案，但为了处理多个可拖动元素，我使用了 data-bucket 属性仅在元素最初放入桶中时应用定位，而不是每次在其中移动时应用定位。

正如您从示例中看到的那样，这种解决方案是可行的，但是一旦将两个以上的 div 拖入目标桶中，它们就会开始跳来跳去，不会落在光标放置它们的位置

这似乎应该是一个简单的修复，但我已经为这个问题摸不着头脑了一天左右，有什么帮助吗？

Answer 1

我已将 .draggable div CSS 设置为 position: absolute，并将父元素设置为 position: relative。还有一些调整，用于初始显示绝对定位的 div 并在它们被删除后显示状态。

请看下面的代码:

    $(document).ready(function () {
        $.each( $(".draggable"), function( key, value ) {
            $(this).css('top',(35*key)+"px");
        });
        $(".draggable").mousedown(function() {
            $("#status").html('');
        })

        $(".draggable").draggable();
        $(".bucket").droppable({
            drop: function (event, ui) {
                $("#status").html(ui.draggable.html()+" is in the "+$(this).attr('id')+" bucket.");

                if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
                    ui.draggable.attr("data-bucket", $(this).attr('id'));

                    var p1 = ui.draggable.parent().offset();
                    $(this).append(ui.draggable);

                    var p2 = ui.draggable.parent().offset();

                    ui.draggable.css({
                        top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
                        left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
                    });
                }
            }
        });
    });

    .bucket {
        width: 400px;
        height: 150px;
        background: #ddd;
        position: relative;
    }

    .draggable {
        width: 50px;
        height: 30px;
        margin-top: 5px;
        background: red;
        position: absolute;
        z-index: 10;
    }

    #destination {
        background: #aaa;
        position: relative;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
    <div class="draggable" data-bucket="origin">Drop 1</div>
    <div class="draggable" data-bucket="origin">Drop 2</div>
    <div class="draggable" data-bucket="origin">Drop 3</div>
    <div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>

<pre id="status"></pre>