jquery可在两个div上拖放

我正在尝试创建一个应用程序，使用jquery drag n drop手动创建网球阵容。有一个边线区有一个球员区。有一个带象限的球场分区（每个球员一个）

我想将可下降的跳水限制在场地上，在场地上跳水时，跳水者会快速移动到一个象限（这是可行的），我还想增加将球员移回边线的能力（但限制下降到场地或边线）

我已经创建了一个JSFIDLE来演示

谢谢你的帮助！ 保罗

$（“.player”）.draggable（）；
$（“.court\u quarter”）。可放下({
接受：“.player”，
drop：函数（事件、用户界面）{
var droppable=$（此）；
var draggable=ui.draggable；
//将可拖动移动到可拖放位置
可拖动。附加到（可下拉）；
draggable.css({
顶部：“0px”，
左：“0px”
});
}
});
$（“#排列”）。可拖放({
接受：“.player”，
drop：函数（事件、用户界面）{
var droppable=$（此）；
var draggable=ui.draggable；
//将可拖动移动到可拖放位置
可拖动。附加到（可下拉）；
draggable.css({
});
}
})；

.court\u区{
宽度：100px；
高度：50px；
背景色：#40A14C；
边框样式：实心；
边框颜色：白色；
}
.法庭名称{
文本对齐：居中；
字体系列：Arial黑色；
}
.玩家{
宽度：100px；
高度：50px；
文本对齐：居中；
字母间距：2px；
字体系列：Arial黑色；
显示：内联块；
}
.男{
背景色：淡蓝色；
}
.女性{
背景颜色：深粉色；
##FF1493；
}

第一法庭



保罗

谢丽尔

沙农

大勇

我不清楚什么在起作用，什么不起作用，以及你想做什么，但它现在没有做。@jonmrich感谢你的帮助。我可以在球场上抛球，它会捕捉到一个象限。但是，我想限制可拖动，以便它只能在另一个象限上抛球，或者回到阵容中。目前，我可以放弃它任何地方。换句话说…你想要它，这样只有一个玩家可以在一个象限中？也就是说，如果象限中已经有另一个玩家，那么象限是“锁定的”所以你不能添加更多的球员。对吗？@jonmrich-没错。但除此之外，我希望能够将球员移回阵容或其他象限。但不能移到任何其他地方。这应该会有所帮助：另外，请查看照片库示例……我不清楚哪些有效，哪些无效，以及您希望如何操作至少现在不行了。@jonmrich谢谢你的帮助。我可以在球场上抛球，它会弹到一个象限。但是，我想限制拖拽，这样它只能在另一个象限上抛球，或者回到阵容中。目前，我可以把它扔到任何地方。换句话说……你想要它，这样只有一个球员可以在一个象限里？也就是说，如果象限中已经有另一个玩家，那么象限被“锁定”所以你不能添加更多的玩家。对吗？@jonmrich-没错。但是另外，我希望能够将玩家移回阵容或其他象限。但不能移到任何其他地方。这应该会有帮助：另外，检查照片库示例。。。