javascript - Initiate drag after delay in jQuery UI Draggable without having to move mouse? - Stack Overflow

admin管理员组

文章数量:1332873

I have a draggable like so:

$(".tab li").draggable({
    revert: true,
    delay: 1000,
    opacity: .75,
    helper: "clone",
    appendTo: "body"
})
.bind("dragstart", this.doSomething)
.bind("dragstop", this.undoSomething);

So, after a second of holding the mouse, the dragging may begin. This works fine as long as you move the mouse after 1 second. Immediately upon moving the mouse, the dragstart event is dispatched like it should be. What I want is 'dragstart' to trigger after 1 second even if you don't drag the mouse.

I know I can do this with:

.bind("mousedown", this.setSomeIntervalAndWait)

but I need access to the ui.draggable element that is created as part of draggable() so the mousedown/mouseup solution won't do.

Is this possible without modifying jQueryUI to trigger the event upon the delay instead of the mouse movement? I can hack something together no problem using timeouts, cloning the object, positioning it and removing it on 'dragstart' but I'm hoping for something less convoluted.

I have a draggable like so:

$(".tab li").draggable({
    revert: true,
    delay: 1000,
    opacity: .75,
    helper: "clone",
    appendTo: "body"
})
.bind("dragstart", this.doSomething)
.bind("dragstop", this.undoSomething);

So, after a second of holding the mouse, the dragging may begin. This works fine as long as you move the mouse after 1 second. Immediately upon moving the mouse, the dragstart event is dispatched like it should be. What I want is 'dragstart' to trigger after 1 second even if you don't drag the mouse.

I know I can do this with:

.bind("mousedown", this.setSomeIntervalAndWait)

but I need access to the ui.draggable element that is created as part of draggable() so the mousedown/mouseup solution won't do.

Is this possible without modifying jQueryUI to trigger the event upon the delay instead of the mouse movement? I can hack something together no problem using timeouts, cloning the object, positioning it and removing it on 'dragstart' but I'm hoping for something less convoluted.

• javascript
• jquery
• jquery-ui
• draggable

Share Improve this question Follow asked Jul 9, 2012 at 17:48 oooyayaoooyaya 1,80311 gold badge1717 silver badges4242 bronze badges 5

• you want dragstart to start even if the user isn't dragging? that doesn't make much sense. – jbabey Commented Jul 9, 2012 at 17:53
• In this case, dragging HAS started because they've fulfilled the delay criteria, but of course you'd know my application better than I would, wouldn't you? If you don't have a constructive answer, don't waste your time, my time, and the time of people who may have the same question later. – oooyaya Commented Jul 9, 2012 at 17:57
• what i am trying to ask is, what is the goal you are trying to achieve with this new dragstart functionality? perhaps there is a much simpler approach that you have not thought of. – jbabey Commented Jul 9, 2012 at 18:02
• 2 Basically, I need a "dragready" event. Something that tells me OK, you've fulfilled the delay criteria and we're ready to drag if the mouse moves. What I need to happen is the clone to be created to indicate "we're going" even if they dont move. And if they release after having done nothing, that's fine - it'll just do dragend and the rest takes care of itself. – oooyaya Commented Jul 9, 2012 at 18:03
• 1 Really good question as I just wondered the same. I think if you use delay having a event notifying you the element is ready to drag would be nice. E.g. you could change the color of the element. See (^^)~> jsfiddle/Sr9Rp/3 – nuala Commented Jul 16, 2012 at 2:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

In latest JQuery UI Draggable there is a delay option now. Check out the demo

The answer is simply No. JQuery UI's draggable interaction doesn't support that, so you'd either need to modify JQuery UI, or do something like you've already implied. I'd go with the latter of the two, unless you know this is something that you're going to reuse very often. I'd say that the best way to implement something like that would be to implement a custom event handler in JQuery using bind (pre-1.7) or on (post-1.7). You could even implement your own little JQuery plug-in that implements draggable but with the addition of your event.

Let me know if you'd like more details than this, or an example of how to write such a plug-in.

本文标签： javascriptInitiate drag after delay in jQuery UI Draggable without having to move mouseStack Overflow