JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="reset" value="reset" />
<div class="buttonBox"></div>

CSS

#reset {
    height:30px;
    width: 100px;
    margin-bottom:25px;
    background-color: #f4f4f4;
}
.buttonBox {
    height:100px;
    width: 100px;
    background-color: blue;
}
.selectedBox {
    background-color: red;
}

JavaScript

var bool = false;
var buttonBox = $(".buttonBox");


buttonBox.on("click", function (event, ui) {
    if($(this).hasClass('dragging')) {
        $(this).removeClass('dragging');
        return;
    }
    console.log("class Added");
    $bool = true;
    var self = $(this);
    self.addClass("selectedBox");
});

buttonBox.draggable({
    start: function(){
        if($(this).hasClass('selectedBox')) return false;
        $(this).addClass('dragging');
    },
    distance: 40,
    disabled: bool,
    revert: "invalid",
    revertDuration: 400,
    refreshPositions: true,

});


// for demo purposes

$("#reset").click(function () {
    cleanSlate();
});

var cleanSlate = function () {
    buttonBox.removeClass("selectedBox");
    $bool = false;
    console.log($bool);
}