JSFiddle - React, Tailwind, and code Playground

HTML

<p>i want click event don't have any effect on below square after it's dragged.  </p>
<div class="div"></div>

CSS

div{
    background-color:pink;
    width:60px;
    height:60px;
}
.orange{
    background-color:orange;
}

JavaScript

$(function(){

    $('div').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('div').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        $(this).toggleClass('orange');
    }
});
});