JSFiddle - React, Tailwind, and code Playground

by Larry Robertson

HTML

<div style="width:50px">
  <div class="objectDrag" style="margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
  <div class="objectDrag" style="margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
  <div class="objectDrag" style="margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
  <div class="objectDrag" style="margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
</div>

<div id="garbageCollector" style="width:100%; height:400px; background-color:#333; color:white;"> Drop items on me</div>

JavaScript

$(document).ready(function(){
		$(".objectDrag").draggable({ opacity: 0.7, helper: "clone", width: 100, height: 100 });  

		$("#garbageCollector").droppable({
			accept: ".objectDrag",
			drop: function(event,ui){
					console.log("Item was Dropped");
					$(this).append($(ui.draggable).clone());
				}
		});

	});