Jquery 我们如何在droppable div中释放项目的确切位置元素上放置项目

我正在开发拖放功能，它工作得很好，但是当我拖放元素时，它不是在我发布它的位置发布的，我知道我遗漏了一些东西，我在这里添加了我的所有代码，有人能帮我吗，我在这里添加了我的所有代码，只是有点帮助，让它工作起来谢谢

$（“.draggable_image”）.draggable({
助手：“克隆”，
});
$（“.droppable”）.droppable({
接受：“.draggable_图像”，
拖动：函数（）{
var offset=$（this.offset（）；
var xPos=offset.left；
var yPos=offset.top；
},
drop：函数（事件、用户界面）{
如果（！ui.draggable.hasClass（“已删除”））{
var uniqueId=new Date（）.getTime（）；
$（.center div”）.append（$（ui.draggable.clone（）.addClass（“drop”）.attr（'id'，uniqueId）.draggable（））；
$（“.drop img”）。可调整大小（{ghost:true}）；
ui.draggable.draggable（'enable'）；
}
}
});

.中央分区{
宽度：80%；
身高：80%；
背景：灰色；
位置：绝对位置；
顶部：240px；
底部：0；
左：0；
右：0；
保证金：自动；
}
.线路{
高度：47px；
边框底部：1px纯黑；
位置：绝对位置；
}
.行完成：悬停{
//边框：1px纯白！重要；
//背景：白色！重要；
//填充：0px；
//字体大小：1.2米；
光标：指针；
}
.直线圈{
宽度：15px；
高度：15px；
边界半径：50%；
字体大小：50px；
颜色：#fff；
线高：5px；
文本对齐：居中；
背景：灰色；//红色
左边距：-3px！重要；
页边距顶部：-5px！重要；
z指数：9999；
}
.draggable{padding:0.5em；float:left；margin:10px 10px 10px；}
.draggeble_存在{填充：0.5em；浮点：左；边距：10px 10px 10px；}
.按钮{
字体大小：6px！重要；
}

---

您需要使用

.position（）

在将其附加到

后设置其位置

例如：

$（函数（）{
$（“.draggable_image”）.draggable({
助手：“克隆”，
zIndex:1000
});
$（“.droppable”）.droppable({
接受：“.draggable_图像”，
拖动：函数（）{
var offset=$（this.offset（）；
var xPos=offset.left；
var yPos=offset.top；
},
drop：函数（事件、用户界面）{
var item=ui.draggable；
如果（！item.hasClass（“已删除”））{
var uniqueId=new Date（）.getTime（）；
var newItem=item.clone（）；
newItem.addClass（“已删除”）；
newItem.attr（“id”，uniqueId）；
newItem.appendTo（$（此））
.拖拉({
句柄：$（this）.not（“.ui可调整大小的句柄”），
安全壳：$（“.droppable”）
});
位置（{of:event
});
newItem.Resizeable({
鬼：是的
});
}否则{
返回true；
}
}
});
});
.center div{
宽度：80%；
身高：80%；
背景：灰色；
位置：绝对位置；
顶部：240px；
底部：0；
左：0；
右：0；
保证金：自动；
}
.线路{
高度：47px；
边框底部：1px纯黑；
位置：绝对位置；
}
.行完成：悬停{
//边框：1px纯白！重要；
//背景：白色！重要；
//填充：0px；
//字体大小：1.2米；
光标：指针；
}
.直线圈{
宽度：15px；
高度：15px；
边界半径：50%；
字体大小：50px；
颜色：#fff；
线高：5px；
文本对齐：居中；
背景：灰色；//红色
左边距：-3px！重要；
页边距顶部：-5px！重要；
z指数：9999；
}
.拖拉{
填充：0.5em；
浮动：左；
保证金：10px 10px 10px；
}
.draggeble_存在{
填充：0.5em；
浮动：左；
保证金：10px 10px 10px；
}
.按钮{
字体大小：6px！重要；
}