如何将可拖动的 JQuery 绑定到悬停事件答案

【问题标题】：How to bind JQuery draggable to a hover event如何将可拖动的 JQuery 绑定到悬停事件
【发布时间】：2012-03-29 06:55:25
【问题描述】：

我很难找到后续效果的解决方案。

想象有一个容器“#container”包含：

元素“#element”只能水平拖动并在其父级内（“#container”）
句柄“#handler”应该是拖动句柄。

现在整个东西应该在悬停时拖动。

到目前为止，我有以下代码，但不知道该怎么做：

<script>
    $("#element").dragable({handle: "#handler",  axis: "x", containment: "#container"});
</script>

我该怎么做？

【问题讨论】：

你的意思是悬停在某个元素上，当你移动光标时，元素也被拖动了？
是的，当我将 #handle 悬停时，#element 应该在 x 轴的 #container 内拖动。
@MuhammadSannanKhalid 有什么想法吗？

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

【解决方案1】：

你没有提到你希望它什么时候停止拖动。我的解决方案是在鼠标离开容器时这样做，尽管您不必这样做。您可以让拖动元素在屏幕上随处跟随鼠标，就像屏幕上那些令人毛骨悚然的 X 眼...

http://jsfiddle.net/pabo/5xAkQ/

// set the element to be draggable
$('div#drag').draggable({
    containment: "parent"
});

// mousing over the handle starts dragging
$('div#handle').hover(function (e) {
    e.type = 'mousedown';
    $('div#drag').trigger(e);
});

// mouse leaving the container stops dragging
$('div#container').mouseleave(function (e) {
   e.type = 'mouseup';
    $('div#drag').trigger(e);
});

【讨论】：