Javascript 可拖动元素在边缘附近卡住

拖动元素似乎会使其在接触其父容器的边缘之前随机卡住。有人能发现为什么会这样吗

另一方面，我无法将记忆中的位置正确地转移到“updateDrag”

不，我不想要任何jQuery解决方案，比如用jQueryUI创建的解决方案

let$container=document.getElementById（'container'）；
让$element=document.getElementById（'element'）；
让鼠标定位；
设偏移量=[0,0]；
让isDown=false；
函数initDrag（事件）{
isDown=真；
//元素还记得以前的位置错误
//偏移量=[
//$element.offsetLeft-event.clientX，
//$element.offsetTop-event.clientY
// ];
偏移量=[
0,
0
];
}
函数updateDrag（事件）{
event.preventDefault（）；
如果（isDown）{
鼠标位置={
x:event.clientX，
y:event.clientY
};
设diffY=mousePosition.y-偏移量[1]；
设diffX=mousePosition.x-偏移量[0]；
如果（diffY>=0&&diffY+$element.offsetHeight=0&&diffX+$element.offsetWidth您确定不会发生这种情况，因为鼠标指针不再位于元素上？您的意思是，即使鼠标光标已经越过边界，红方块仍与侧面保持一小距离？这是因为忽略了鼠标e绿色区域外的通风口。Mousemove事件速率有限；移动越快，事件触发位置之间的距离就越大。啊哈，“initDrag”到“updateDrag”之间是否失去联系，因为“mousedown”侦听器仅侦听元素“$element”？如果您能将此更正为答案，则非常感谢您的支持！谢谢您误解了；
updateDrag
侦听整个文档。问题出在您自己的
If
语句中；请摆脱它们。相反，请使用
Math.min
和
Math.max
来限制红框的移动自由新界。