javascript - JQuery OnDrag 悬停时触发单击

Question

我有一个拖放应用程序，它使用 JQuery UI onDrag 和 onDrop。该应用程序是一个带有选项卡的房间预订系统。我已经使 drop-work 完美运行，但有一个功能是我真正想要的(如果可能的话)。

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

示例:您想要将一个人从 Tab1 移动到 Tab2，无需单击该选项卡，只能拖动该人 -> 将鼠标悬停在选项卡上 -> 然后单击该选项卡。

Answer 1

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

技巧是使用 mousemove 事件，但使其仅在鼠标在可拖动元素上按下时才起作用。因此，我们在 mousedown 事件中设置某个 bool 值 true，然后在 mouseup 事件中设置为 false。 mousemove 事件检查 bool 值是否为 true，并在且仅当 bool 值为 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>