jquery ui draggable防止点击外面

Question

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

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

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

Answer 1

这是缺少一些关于你想要做什么的信息，因此在阅读了你描述的内容之后，我猜你想要在完成拖动时阻止事件，所以这可以是在开始或结束时，我我想你最后想要那个。我试图重现你的问题，在Y轴上有两个div，另一个在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;
}

JS

/* 
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/

Answer 2

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