Javascript 将一个分区捕捉到另一个分区

我有两个div在包装器div中。包装器div是可拖动的。我正在使用jQueryUI

<div id="wrapper">
    <div class="biggerDivision"></div>
    <div class="smallerDivision">>/div>
</div>

<div class="snapDivision"></div>

这样做就是将包装器捕捉到snapDivision

这是小提琴

---

我应该做哪些更改才能将smallerDivision捕捉到snapDivision，而不是整个包装器。

我找不到任何简单的方法来实现这一点

这只是针对您的场景的一种变通方法

$（'.smallerDivision'）。可拖动({
快照：“.snapDivision”，
拖动：函数（事件、ui）{
$（“.biggerDivision”）.css（“top”，ui.position.top+23）；
$（“.biggerDivision”）.css（“左”，ui.position.left-23）；
}
});
$（'.biggerDivision'）。可拖动({
句柄：“.smallerDivision”
});
.biggerDivision{
高度：100px；
宽度：100px；
背景色：红色；
位置：绝对位置；
顶部：30px
}
.小区{
高度：100px；
宽度：50px；
边框顶部：23px纯绿；
边框底部：50px纯绿；
背景色：红色；
位置：绝对位置；
左：30px
}
斯内普司{
高度：50px；
宽度：50px；
背景颜色：蓝色；
位置：绝对位置；
左：200px
}

这是一种解决方法，请尝试。。我必须只在包装器上设置draggable属性，这是一个约束，这使得它更加困难：（你能建议对此进行修改吗
$('#wrapper').draggable({
    snap: ".snapDivision"
});