JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<ul>
    <li>
        <div class="element a">a</div>
    </li>
    <li>
        <div class="element b">b</div>
    </li>
    <li>
        <div class="element c">c</div>
    </li>
</ul>

CSS

ul,
li{ margin: 0; padding: 0; }

ul { height: 120px; background: #ccc; }

li { list-style: none; float: left; width: 100px; height: 100px; margin: 10px; background: #666; position: relative; }
li.drop-hover .element { opacity: .5; }

.element { position: absolute; width: 100px; height: 100px; background: #333; color: #fff; text-align: center; line-height: 100px; z-index: 5; }
.element.being-dragged { background: #0ff; z-index: 6; }
.element.a { background: #f00; }
.element.b { background: #0f0; }
.element.c { background: #00f; }

JavaScript

(function() {
	var droppableParent;
	
	$('ul .element').draggable({
		revert: 'invalid',
		revertDuration: 200,
		start: function () {
			droppableParent = $(this).parent();
		
			$(this).addClass('being-dragged');
		},
		stop: function () {
			$(this).removeClass('being-dragged');
		}
	});
	
	$('ul li').droppable({
		hoverClass: 'drop-hover',
		drop: function (event, ui) {
			var draggable = $(ui.draggable[0]),
				draggableOffset = draggable.offset(),
				container = $(event.target),
				containerOffset = container.offset();
			
			$('.element', event.target).appendTo(droppableParent).css({opacity: 0}).animate({opacity: 1}, 200);
			
			draggable.appendTo(container).css({left: draggableOffset.left - containerOffset.left, top: draggableOffset.top - containerOffset.top}).animate({left: 0, top: 0}, 200);
		}
	});
} ());