JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<p>i want click event don't have any effect on below square after it's dragged.  </p>
<a href="www.google.com"><div id="dragbox"></div></a>

CSS

#dragbox{
    background-color:pink;
    width:60px;
    height:60px;
}

#dragbox.orange{
    background-color:orange;
}

JavaScript

$(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(){
                console.log("hi " + this);
                $(event.target).data('dragging', false);
            }, 1);
        }
    });
});