JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<div>
  <div class="objectDrag">
      <span class="dragChild">Drag 1</span>
  </div>
  <div class="objectDrag">Drag 2</div>
  <div class="objectDrag">Drag 3</div>
  <div class="objectDrag">Drag 4</div>
</div>

<div id="garbageCollector">Drop items on me</div>

CSS

.objectDrag {
    color: white;
    background-color: blue;
    display: block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #0000dd;
    margin: 5px 0;
}

.dragChild {
    display: block;
    background-color: #aaaaff;
    margin: 5px 0;
    line-height: 40px;
}

#garbageCollector {
    margin-top: 20px;
    border: 1px solid #111;
    background-color: #555;
    color: white;
    padding: 10px 10px 80px;
}

JavaScript

$(document).ready(function(){
		$(".objectDrag").draggable({ 
            opacity: 0.7, 
            helper: function(e) {
                var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable");
                return original.clone().css({
                  width: original.width()
                });
                
            }
        });  

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