CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropjquery-ui-draggable
Trident D'Gao
Trident D'Gao

Reputation: 19680

Drag&Drop on demand: How can I enable, start and continue dragging all within a single mousedown event?

So I have over 9000 elements each of which should be able to be dragged around. It doesn't seem feasible to turn each of them into draggable by applying the jQueryUI plugin directly. I was thinking about making an element draggable in response to a mouse down event by listening to the mouse down event of the document and checking if the target of the event is one of the elements. Once the mouse down on an element happened I turn it into a draggable and at the same time make it being captured and dragged already so that the dragging continues as if that mouse down initiated the dragging. Once dragging is finished (either by dropping or cancelling) the draggable pluging is destroyed and the element gets back to unbound state. This way only one element at a time can be dragged making this solution lightweight and scalable.

How can I do this?

Upvotes: 0

Views: 173

Answers (1)

tom
tom

Reputation: 22939

This can be done using a combination of trigger() and draggable("destroy"):

function downHandler(event)
{
    var target = $(event.target);
    target.off("mousedown", downHandler); // prevents infinite recursion
    target.on("mouseup", upHandler);
    target.draggable();
    target.trigger(event);
}

function upHandler(event)
{
    var target = $(event.target);
    target.draggable("destroy");
    target.off("mouseup", upHandler);
    target.on("mousedown", downHandler);
}

$(".draggable-on-mousedown").on("mousedown", downHandler);

Demo: http://jsfiddle.net/jPjKN/

Upvotes: 1

Related Questions