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

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

$（文档）.ready（函数（）{
$（“.draggable”）.draggable（）；
$（“.bucket”）.可拖放({
drop：函数（事件、用户界面）{
if（$（this.attr（'id'））！==ui.draggable.attr（“数据桶”））{
ui.draggable.attr（“数据桶”，$（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），
左：parseInt（ui.draggable.css（'left'））+（p1.left-p2.left）
});
}
}
});
});
.bucket{
宽度：400px；
高度：150像素；
背景：#ddd
}
.拖拉{
宽度：50px；
高度：30px；
边缘顶部：5px；
背景：红色；
}
#目的地{
背景：#aaa
}

下降1
下降2
下降3
下降4
我已将
.draggable
divs CSS设置为
位置：绝对
，将父级设置为
位置：相对
。此外，还进行了一些调整，用于最初显示绝对定位的div，以及在放置后显示状态

请查看以下代码：


$（文档）.ready（函数（）{
$.each（$（“.draggable”）、函数（键、值）{
$（this.css（'top'，（35*键）+“px”）；
});
$（“.draggable”）.mousedown（函数（）{
$（“#状态”）.html（“”）；
})
$（“.draggable”）.draggable（）；
$（“.bucket”）.可拖放({
drop：函数（事件、用户界面）{
$（“#status”）.html（ui.draggable.html（）+”位于“+$（this.attr（'id'）+”bucket.”）中；
if（$（this.attr（'id'））！==ui.draggable.attr（“数据桶”））{
ui.draggable.attr（“数据桶”，$（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），
左：parseInt（ui.draggable.css（'left'））+（p1.left-p2.left）
});
}
}
});
});
.bucket{
宽度：400px；
高度：150像素；
背景：ddd；
位置：相对位置；
}
.拖拉{
宽度：50px；
高度：30px；
边缘顶部：5px；
背景：红色；
位置：绝对位置；
z指数：10；
}
#目的地{
背景：#aaa；
位置：相对位置；
}

下降1
下降2
下降3
下降4
我从未想过CSS是个问题，这真是太棒了