Stop event propagation from jquery Draggable stop to onclick

Question

I have a draggable div , made dragable with jqueryUI draggable library. I have an onclick handler on the div, but when I drag the div it then fires the click handler, which I don't want. The drag stop happens before the click, so I tried this:

$("#div").draggable({
    stop: function(e) {
        e.originalEvent.stopPropagation();
    }
});

but the onclick event still fires. Any ideas JavaScript gurus?

Answer 1

You can use chaining and handle it directly on the click method. While in the dragging state, the draggable gets a new class: ui-draggable-dragging .

$("#div")
    .draggable()
    .click(function(){
      if ( $(this).is('.ui-draggable-dragging') ) {
            return;
      }
      // click action here
    });