Initiate drag and drop after delay in jQuery UI Draggable without having to move the mouse?

Question

I have a drag and drop, for example:

$(".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 hold of the mouse, drag and drop can begin. This works fine while you move the mouse after 1 second. Immediately after moving the mouse, the dragstart event is dispatched, as it should be. I want dragstart to start after 1 second, even if you do not drag the mouse.

I know I can do this with:

 .bind("mousedown", this.setSomeIntervalAndWait) 

but I need access to the ui.draggable element, which is created as part of draggable (), so the mousedown / mouseup solution will not do.

Is it possible without changing jQueryUI to trigger a delay event instead of a mouse movement? I can hack something together without problems using timeouts, cloning an object, positioning it and deleting it on dragstart, but I hope for something less confusing.

Answer 1

The answer is simply no. JQuery UI draggable interaction does not support this, so you need to either change the JQuery UI, or do something like what you already meant. I will go with the last of the two, if you do not know what it is that you are going to reuse very often. I would say that the best way to implement something like this would be to implement a custom event handler in JQuery using bind (pre-1.7) or on (after 1.7). You can even implement your own little jQuery plugin that implements draggable , but with the addition of your event.

Let me know if you want more details than this, or an example of how to write such a plugin.

Answer 2

The latest jQuery UI Draggable has a delay option. Watch the demo