Skip to content
Advertisement

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/

Advertisement

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.

User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement