如何将JQuery draggable绑定到悬停事件

Question

我在寻找后续效果的解决方案时遇到了困难。

想象一下，容器“ #container ”包含：

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

现在整个事情被拖延悬停。

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

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

我该怎么做？

Answer 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);
});