Question

42

Prevent click event after drag in jQuery

rated 0 times [ 43] [ 1] / answers: 1 / hits: 22412 / 11 Years ago, sat, august 3, 2013, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brendan

Add To Favorites

Follow

Total Points: 426

Total Questions: 110

Total Answers: 94

Location: Western Sahara

Member since Mon, May 3, 2021

3 Years ago

answered 11 Years ago darennevina · Accepted 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.