将多个div拖动到另一个jQuery中

Question

我一直在尝试使用jQuery将div从一个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>

我已经根据这个答案调整了js，但为了处理多个可拖动元素，我使用了data-bucket属性，只在元素最初放入桶中时应用定位，而不是每次在桶中移动时。

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

这似乎应该是一个简单的解决方案，但我已经为这个问题挠头一天左右了，有什么帮助吗？

Answer 1

我已经将.draggablediv的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>