JSFiddle - React, Tailwind, and code Playground

by vishal pandey

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="drag">I can be dragged</div>
<div class="drag xyz">I cannot be dragged</div>
<br/>
<br/>
<div id="drop">Drop Here</div>

CSS

#drop{
  width:100px;
  height:100px;
  background-color:#8f8f8f;
}

JavaScript

$('.drag').draggable({
    cancel: ".xyz",
    helper: function(){
        return "<span>Dragging</span>";
    }
});
$('#drop').droppable({
    accept: 'div',
    drop: function(e,ui){
        ui.draggable.text('I am draggable')
    }
})