JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='row'>
  <div class='col-md-6'>
    <div id="draggable" class="ui-widget-content">
      <p>Drag me to my distination</p>
    </div>
  </div>
  <div class='col-md-2'>
    <div id="droppable" class="ui-widget-header">
      <p>Dropp here</p>
    </div>
  </div>
</div>


<div id=d1></div>
<br>
<div class='radio-inline'>
  <label>
    <input type='radio' name='r1' id='r1' value='true'>True</label>
</div>
<div class='radio-inline'>
  <label>
    <input type='radio' name='r1' id='r2' value='false' checked>False</label>
</div>

JavaScript

$(document).ready(function() {
  $(function() {
    $("#draggable").draggable({});
  });
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this)
        .find("p")
        .html("Welcome Dropped!");
    }
  });
  var status_used = $("#droppable").droppable("option", "disabled");
  $('#d1').html(" <b>Status of option : disabled </b> " + status_used);
  $("input:radio[name=r1]").click(function() {
    var sel = ($(this).val() == 'true');
    $("#droppable").droppable("option", "disabled", sel);
    var status_used = $("#droppable").droppable("option", "disabled");
    $('#d1').html(" <b>Status of option: disabled</b>: " + "(" + sel + ")" + status_used);
  });
});