Javascript jQuery UI可拖放，不在特定DIV上传播事件

我正在开发一个界面，用户可以将“小部件”放到页面中的“可拖放区域”

小部件存储在一个div中，该div绝对位于页面中（在左侧，z-index:1） 可拖放区域位于页面的另一个div中

问题是： 当我将小部件从左栏拖动到页面中的可拖放区域时，可拖放事件甚至通过左栏div被捕获。我想在用户拖动到左栏时停止可拖放事件，但在用户离开左栏时保留事件

HTML JS 检查示例：

有什么想法吗

谢谢。

试试这段代码

$('#left .dragMe').draggable({
       refreshPositions: true
}); 

问题不在JavaScript代码中。问题在于你的CSS

您的左侧始终是可下降区域的一部分，因为它绝对位于可下降区域

如果你把它修好，它就会起作用

此外，我不建议为此使用jQueryUI库，因为所有当代浏览器都有

编辑1：

您还可以在左侧容器的宽度上向右移动，以防止交互：

#right{
    margin-left: 230px;
}

编辑2：

一旦你说你不能改变HTML，你也可以做一些有趣的事情

尝试检测光标偏移并确定是否准备好放置图元：

drop: function( event, ui ) {
     if (event.pageX > $('#left').width() + 100) {
         console.log(event);
     }
}

---

谢谢您的回答，但这并不会阻止通过左列的传播。谢谢您的回答。你说得对，但我需要保持左列在绝对位置。如果我保持绝对位置，你认为没有解决方案吗？同时感谢你建议使用drag n drop API，我也会在这边检查。你可以将右边的部分移动到更大的尺寸，这样它就不会与左边的部分交互。看看编辑部分。是的，当然，这也是关键。但是我正在开发的界面将colum置于可拖放div之上，我无法改变这种行为。无论如何，谢谢你的时间和帮助。看看我的其他编辑。可以检查光标的位置。

$('#left .dragMe').draggable({
       refreshPositions: true
}); 

#left {
      position: relative;
}

#right{
    margin-left: 230px;
}

drop: function( event, ui ) {
     if (event.pageX > $('#left').width() + 100) {
         console.log(event);
     }
}