JSFiddle - React, Tailwind, and code Playground

by taoist

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<p>Click the orange block and move the green one. Click the orange block again to "lock" the green block and inhibit its movement</p>.

<div id="button">Click me and...</div>
<div id="dragBlock">Move me</div>

CSS

#dragBlock {
    width:100px;
    height:100px;
    background-color:green;
}
#button {
    width:100px;
    height:100px;
    background-color:orange;
    margin-bottom:200px;
}

JavaScript

$(document).ready(function () {
    var state = "disable";

    var button = document.getElementById("button");
    var dragBlock = document.getElementById("dragBlock");
    $(dragBlock).draggable({disabled: true});
    var toggle = function () {
       if (state === "enable") {
            state = "disable";
        } else if (state === "disable") {
            state = "enable";
        }
       
        $(dragBlock).draggable(state);
        //  $(dragBlock).draggable(); // This only works with this line of code. Why?
        console.log(state);
    };



    button.addEventListener("click", toggle, false);


});