JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<div id="button">Button</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");
	
	


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



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


});