我有一个拖放应用程序,它使用 JQuery UI onDrag 和 onDrop。该应用程序是一个带有选项卡的房间预订系统。我已经使 drop-work 完美运行,但有一个功能是我真正想要的(如果可能的话)。
有没有办法为选项卡创建一个事件处理程序,仅在拖动元素时才会触发?
示例:您想要将一个人从 Tab1 移动到 Tab2,无需单击该选项卡,只能拖动该人 -> 将鼠标悬停在选项卡上 -> 然后单击该选项卡。
最佳答案
没有用于拖动元素的特定事件处理程序,但通过操纵其他事件,您可以使其工作。
技巧是使用 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>
关于javascript - JQuery OnDrag 悬停时触发单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29746901/