JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

CSS

#draggable {
	    width: 100px;
	    height: 100px;
	    padding: 0.5em;
	    float: right;
	    margin: 10px 10px 10px 0;
	}
	#droppable {
	    width: 150px;
	    height: 150px;
	    padding: 0.5em;
	    float: left;
	    margin: 10px;
	}

JavaScript

$("#draggable").draggable({
    helper: "clone"
});
$("#droppable").droppable({
    drop: function (event, ui) {

        if (confirm('Drop here?')) {
            $(this).append(ui.draggable);
        }else{
          /* do nothing*/  
        }
    }
});