JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable">
 <div id="" class="draggable2">
  <p>Test1</p>
</div><br/>
<div id="" class="draggable2">
  <p>Test2</p>
</div><br/>
<div id="" class="draggable2">
  <p>Test3</p>
</div><br/>
<div id="" class="draggable2">
  <p>Test4</p>
</div><br/>
<div id="" class="draggable2">
  <p>Test5</p>
</div><br/>
<div id="" class="draggable2">
  <p>Test6</p>
</div><br/>
</div>

<div id="droppable" class="" style="">
  <p>Drop here</p>
</div>

CSS

.draggable2 { width: 100px; height: 30px; padding: 0.5em;  margin: 10px 10px 10px 0;border:1px solid green }
  #draggable, #draggable2 { width: 100px; height: 30px; padding: 0.5em; float:left; margin: 10px 10px 10px 0; }
  #droppable { width:250px;height:500px;border:1px solid red; padding: 0.5em; float: left; margin: 10px; }

JavaScript

$(function() {  
    $( ".draggable2" ).draggable({ 
	   revert: "invalid" 
	}); 
    $( "#droppable" ).droppable({     
      drop: function() {
	    //var xPos = offset.left;
        //var yPos = offset.top;    
        //alert( $(this).position().left ); 		
        $( this ).find( "p" ).html( "Yes,it is dropped!" );
      }
    });
  });