Javascript 限制jQueryUI拖动到元素，但允许在元素之间移动？

我有两个并排的正方形（div）。当您拖动一个项目到其中一个项目的内部时，我希望将其限制为该项目，但是，如果您将鼠标光标移出该项目并移动到下一个正方形，我希望该元素从第一个正方形弹出到第二个正方形，并限制为第二个正方形（如果您在拖动的同时再次将鼠标移回第一个正方形，则反之亦然）。但是，元素在任何时候都不应与正方形重叠（它应始终完全位于其中一个或另一个的内部）。我该怎么做？我正在使用jqueryui

---

无法让jQuery用户界面执行此操作，但是，它能够使用普通JavaScript执行此操作

var拖动=false；
var lastE；
$（'#t1'）.mousedown（函数（e）{
拖动=真；
});
$（'body'）.mousemove（函数（e）{
lastE=e；
}).mouseup（函数（e）{
拖动=假；
});
var placeT=函数placeT（e）{
var newX=数学圆整（（e.pageX-2）/20）*20；
var newY=数学轮（（e.pageY-2）/20）*20；
如果（newX=220&&newX从UI/UX的角度来看，我不确定我是否会以这种方式实现它。如果用户在视觉上操作某个东西，它应该在任何时候都尽可能地响应。相反，我建议允许将项目拖过容器边界，但只要松开鼠标，就将它们移动到接近的位置我有一种感觉，感觉会更自然。我不反对你的评估，但是，如果没有其他理由，我必须这样做，除非是为了向我的尖头上司展示这种感觉有多不好。然后根据你的建议，使用这个版本进行可用性/用户测试。然后根据实际的用户研究，我们决定采用哪种方式“赢了”。太棒了！希望我能再投一次。干得好，伙计。：）
var dragging = false;
var lastE;

$('#t1').mousedown(function(e){
    dragging = true;
});

$('body').mousemove(function(e){
    lastE = e;  
}).mouseup(function(e){
    dragging = false;
});


var placeT = function placeT(e) {
    var newX = Math.round((e.pageX - 2)/20) * 20;
    var newY = Math.round((e.pageY - 2)/20) * 20;

    if(newX <= 100){
         $('#t1').offset({ left: newX });
    }else if(newX >= 220 && newX <= 300){
         $('#t1').offset({ left: newX });
    }else{

    }
     $('#t1').offset({ top: newY });
}

var drag = function drag() {
    if(dragging){
        placeT(lastE);
    }
    window.setTimeout(drag, 1);    

};
window.setTimeout(drag, 100);