CODEWITHSUNDEEP
jqueryjquery-uiclickdoublejquery-ui-draggable
MKHC
MKHC

Reputation: 459

Clicking or double clicking a draggable element with jQuery?

I would like to be able to click or double click an element that is also draggable. How can this be done? I've tried various click(), dblclick() and other methods, none have worked so far.

I've currently got an awkward workaround comparing the milliseconds between mouseup and mousedown events, but this still requires the element to have been dragged at least one pixel.

I want to be able to click it normally like a button, without having to drag it first.

Upvotes: 0

Views: 1765

Answers (3)

Grumoll
Grumoll

Reputation: 333

Neither of the other two solutions worked for me, the following did:

$('#draggableDiv').mousedown(function () {
    var thisone=$(this);
    setTimeout(function(){
        thisone.attr("draggable","true");   
    },200);
});

Upvotes: 0

Sergei Zahharenko
Sergei Zahharenko

Reputation: 1524

You can use short delay to prevent random dragging on just click.

$('.draggable').draggable({ delay: 200 });

Upvotes: 1

David Thomas
David Thomas

Reputation: 253476

Assuming that you don't mind having a child-element, to receive the clicks, of the draggable outer-element, then this approach could be taken:

$('#draggableDiv').draggable(
   {
       cancel : 'a'
   });

JS Fiddle demo.

The cancel option takes a CSS/jQuery selector to identify which element(s) should not be considered triggers for the dragging event.

Edited to address the fact that, at least in Chromium 16/Ubuntu 11.04, an element appears to be click-able double-click-able and draggable all at the same time: JS Fiddle example.

Upvotes: 0

Related Questions