Question

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.

Answer 1

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.