JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable" class="ui-widget-content">
	<center>  
      <p>KEEP</p>
	  <p>CALM</p>
      <p>AND</p>
	  <p>BE</p>
      <p>AWESOME</p>
    </center>
</div>
    
<button id="enable" type="button">Enable</button>
<button id="disable" type="button">Disable</button>

CSS

div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}

JavaScript

// set draggable functionality to div tag
$('#draggable').draggable();

// when button clicked ...
$('#enable').click(function() {
    $("#draggable").draggable({ disabled: false });
});

// when button clicked ...
$('#disable').click(function() {
    $("#draggable").draggable({ disabled: true });
});