jquery ui drag event to cancel click event

Question

Ok, so I have these draggable elements, that also have click event handlers. The problem is that the click event is firing (and handled) when I drag the element, but what I wanted is to handle the click only when there's no dragging going on, so when the element is dragged, cancel the click event handling.

Here's a demo fiddle: http://jsfiddle.net/wsTY5/

$('div.map').draggable(options);

Answer 1

You can accomplish it with something like this:

var clicked = true;
var options = {
    containment: '.map-containment',
    cursor: 'move',
    start: function( event, ui ) {
        clicked = false;
    }
};

$('div.map').draggable(options);

var counter = 0;

var $span = $('#ClickCounter > span');
var $dummies = $('.dummy');
$dummies.click(function(){
    if(clicked){
        $span.html(++counter);
    }
    clicked = true;
});

Example:

http://jsfiddle.net/trevordowdle/wsTY5/1/

Update

Sometimes when you drag it does not register the click event depending on where you end the dragging.

var options = {
    containment: '.map-containment',
    cursor: 'move',
    start: function( event, ui ) {
        clicked = false;
    },
    stop: function( event, ui ) {
        setTimeout(function(){
            clicked = true;  
        },10);
    }
};

So I added the stop function to the options just to make sure that it would count clicks once you stop dragging.

http://jsfiddle.net/trevordowdle/wsTY5/3/