如何将可拖动的JQuery绑定到悬停事件 [英] How to bind JQuery draggable to a hover event

问题描述

我很难找到一种解决方案，以提高效果.

I'm having a tough time in finding a solution for following effect.

想象一下，有一个容器" #container "包含:

Imagine having a container "#container" containing:

• 元素" #element "只能在其父级中水平拖动((" #container "))
• 句柄" #handler "，应为拖动的句柄.

• An element "#element" that should only be draggable horizontally and within it's parent ("#container")
• A handle "#handler" which should be the dragging handle.

现在整个事物的住所将被悬停拖曳.

Now the whole thing shold be dragged on hover.

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

Up to now I have following code, but don't know what to do:

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

我该怎么做?

推荐答案

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

You don't mention when you want it to -stop- dragging. My solution is to do so when the mouse leaves the container, though you don't have to. You could have the dragging element follow the mouse everywhere on the screen like those creepy X-eyes on screen...

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

这篇关于如何将可拖动的JQuery绑定到悬停事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！