jquery ui可拖动防止点击外部答案

【问题标题】：jquery ui draggable prevent click outsidejquery ui可拖动防止点击外部
【发布时间】：2019-03-05 17:19:51
【问题描述】：

我有一个可拖动的 div，它的移动受限于 y 轴。我的代码：

$(".drag").draggable({ axis: "y" });

这很好用。但是，这个 div 靠近其他具有点击事件的 div。在 y 轴上，光标随可拖动对象移动，所以一切都很好。但在 x 轴上，光标不限于元素。因此，如果光标离开可拖动，当我释放按钮时，将在其他元素上调用事件。一些想法来限制鼠标在 x 轴上的位移或在可拖动功能运行时防止在此 div 之外单击？谢谢你的帮助

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

这缺少一些关于你到底想要做什么的信息，所以在阅读了你描述的内容之后，我猜你想在完成拖动时阻止该事件，所以这可以在开始或结束时，我认为你想要最后的那个。我试图重现您的问题，其中有两个 div，一个在 Y 轴上，另一个在 X 轴上，如下所示： JS

<div class="dragYAxis"></div>
<div class="dragXAxis"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
}

.dragXAxis{
  height: 20px;
  width: 20px;
  background: grey;
}

.dragYAxis{
  height: 20px;
  width: 20px;
  background: white;
}

/* 
Try this solution for your problem and see if it helps too:
$('.dragYAxis').draggable({
        axis: 'y',
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        } 
});*/

$(".dragYAxis").draggable({axis: 'y'});

$(".dragXAxis").draggable({axis: 'x'});

$(".dragYAxis").click(function(){
  alert();
});
$(".dragXAxis").click(function(){
  alert();
});

但是在一个事件之上释放一个事件并没有产生双重事件，另一个事件也有可拖动的，也有一个简单的点击事件。

您可以自己动手尝试重现问题吗？否则，您可以尝试在这些人阻止事件解决方案中寻找一些类似的解决方案：

Preventing click event with jQuery drag and drop

链接到 JS 小提琴： https://jsfiddle.net/kn30mLpd/

【讨论】：

【解决方案2】：

感谢您的帮助。你的回答让我思考这个问题。事实上，这不是因为点击事件，而是因为这个附近的区域是可放置的，所以当我的光标在它上面时，当我释放鼠标按钮时，因为我被点击了一个可拖动的区域，所以显示了可放置的对话框。要禁用此效果，我会将可放置区域的可放置选项悬停在可拖动区域的可放置选项上以不打开对话框（如果可拖动对象不是所希望的）。谢谢

【讨论】：