Question

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.

Answer 1

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.