悬停时 JQuery OnDrag 触发点击答案

【问题标题】：JQuery OnDrag fire a click when hovered悬停时 JQuery OnDrag 触发点击
【发布时间】：2015-04-20 11:41:12
【问题描述】：

我有一个使用 JQuery UI onDrag 和 onDrop 的拖放应用程序。这个应用程序是一个有标签的房间预订系统。我已经使 drop 工作完美，但有一个我真正想要的功能（如果可能的话）。

有没有办法为选项卡创建一个事件处理程序，只有在您拖动元素时才会触发？

示例：您想将一个人从 Tab1 移动到 Tab2，而不单击选项卡，您只能拖动该人 -> 悬停选项卡 -> 然后单击选项卡。

【问题讨论】：

你可以强制点击事件触发
@AntoKing 是的，这就是我想要发生的事情。我只是不知道怎么做..我已经尝试过 onHover 选项卡，它会触发有效的 onClick，但没有按预期进行..如何使它仅在您拖动元素时触发？
jqueryui.com/droppable 看看这个

标签： javascript jquery jquery-ui drag-and-drop draggable

【解决方案1】：

没有用于拖动元素的特定事件处理程序，但通过操纵其他事件，您可以使其工作。

诀窍是使用mousemove 事件，但仅在鼠标按下可拖动元素时才起作用。因此，我们在mousedown 事件中创建某个布尔值true，然后在mouseup 事件中使其成为false。 mousemove 事件检查是否为布尔值，当且仅当布尔值为 true 时才运行其代码。

这是一个例子：

$(document).ready(function() {
    //Make draggable draggable
    $("#draggable").draggable();
    //mousedown and mouseup Boolean
    var drragging = false;
    $("#draggable").mousedown(function() { dragging = true; });
    $("#draggable").mouseup(function() { dragging = false; });
    //mousemove event -> mousedrag event
    $("#draggable").mousemove(function() { if (dragging) {
        //The event:
        $("#draggable").css("color", "rgb("+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+")");
    }});
});

<span id="draggable">Drag me!</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

【讨论】：

非常好！我使用 onDrag 启动和停止方法来更改“拖动 = true/false”，感谢您的想法！你是男人