Skip to content

prevent click event after drag in jQuery

I have a draggable <div> with a click event and without any event for drag.

but after i drag <div> the click event is apply to <div>.

how can prevent of click event after drag?

$(function(){
    $('div').bind('click', function(){
        $(this).toggleClass('orange');
    });
    $('div').draggable();
});

http://jsfiddle.net/prince4prodigy/aG72R/

Answer

I made a solution with data and setTimeout. Maybe better than helper classes.

<div id="dragbox"></div>

and

$(function(){
    $('#dragbox').bind('click', function(){
        if($(this).data('dragging')) return;
        $(this).toggleClass('orange');
    });
    $('#dragbox').draggable({
        start: function(event, ui){
            $(this).data('dragging', true);
        },
        stop: function(event, ui){
            setTimeout(function(){
                $(event.target).data('dragging', false);
            }, 1);
        }
    });
});

Check the fiddle.