JSFiddle - React, Tailwind, and code Playground

by bizamajig

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: function(event) {
                return $(event.target).clone().css({
                    width: $(event.target).width()
                });
                
            }
        });  

		$("#garbageCollector").droppable({
			accept: ".objectDrag",
			drop: function(event,ui){
                var itemToClone = $(ui.draggable);
                $(this).append(itemToClone.clone().css({
                    width: itemToClone.width(),
                    margin: 0
                }));
            }
		});
	});