Preventing click event with jQuery drag and drop

A solution that worked well for me and that doesn't require a timeout: (yes I'm a bit pedantic ;-)

I add a marker class to the element when dragging starts, e.g. 'noclick'. When the element is dropped, the click event is triggered -- more precisely if dragging ends, actually it doesn't have to be dropped onto a valid target. In the click handler, I remove the marker class if present, otherwise the click is handled normally.

$('your selector').draggable({    start: function(event, ui) {        $(this).addClass('noclick');    }});$('your selector').click(function(event) {    if ($(this).hasClass('noclick')) {        $(this).removeClass('noclick');    }    else {        // actual click event code    }});

Solution is to add click handler that will prevent click to propagate on start of drag. And then remove that handler after drop is performed. The last action should be delayed a bit for click prevention to work.

Solution for sortable:

....sortable({...        start: function(event, ui) {            ui.item.bind("click.prevent",                function(event) { event.preventDefault(); });        },        stop: function(event, ui) {            setTimeout(function(){ui.item.unbind("click.prevent");}, 300);        }...})

Solution for draggable:

....draggable({...        start: function(event, ui) {            ui.helper.bind("click.prevent",                function(event) { event.preventDefault(); });        },        stop: function(event, ui) {            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);        }...})

I had the same problem and tried multiple approaches and none worked for me.

Solution 1

$('.item').click(function(e){                if ( $(this).is('.ui-draggable-dragging') ) return false;});  

does nothing for me. The item is being clicked after the dragging is done.

Solution 2 (by Tom de Boer)

$('.item').draggable({       stop: function(event, ui)     {         $( event.originalEvent.target).one('click', function(e){ e.stopImmediatePropagation(); } );    }});

This works just fine but fails in one case- when I was going fullscreen onclick:

var body = $('body')[0];     req = body.requestFullScreen || body.webkitRequestFullScreen || body.mozRequestFullScreen;req.call(body); 

Solution 3 (by Sasha Yanovets)

 $('.item').draggable({        start: function(event, ui) {            ui.helper.bind("click.prevent",                function(event) { event.preventDefault(); });        },        stop: function(event, ui) {            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);        }})

This does not work for me.

Solution 4- the only one that worked just fine

$('.item').draggable({   });$('.item').click(function(e){  });

Yep, that's it- the correct order does the trick- first you need to bind draggable() then click() event. Even when I put fullscreen toggling code in click() event it still didn't go to fullscreen when dragging. Perfect for me!