JSFiddle - React, Tailwind, and code Playground

by rity

HTML

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

<div id="draggable1" class="ui-widget-content">
  <p>1</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
  <p>2</p>
</div>

<div id="draggable3" class="ui-widget-content">
  <p>3</p>
</div>

CSS

#draggable1, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 300px; height: 300px; padding: 0.5em; float: left; margin: 10px; }

JavaScript

$(function() {
	var pastDraggable = "";
    $("#draggable1" ).draggable({
        start: function(){
			Positioning.initialize($(this));
        },
    });
	$("#draggable2" ).draggable({
        start: function(){
			Positioning.initialize($(this));
        },
    });
	$("#draggable3" ).draggable({
		start: function(){
			Positioning.initialize($(this));
        },
    });
    $("#droppable" ).droppable({
		//Event to accept a draggable when dropped on the droppable
		drop: function(event, ui) {
			$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
			
			//Get the current draggable object
			var currentDraggable = 	$(ui.draggable).attr('id');

			//If there is an object prior to the current one
			if (pastDraggable != "") {
				//Place past object into its original coordinate
				$("#" + pastDraggable).animate($("#" + pastDraggable).data().originalLocation,"slow");
			}	
			
			//Store the current draggable object
			pastDraggable = currentDraggable;
		},
		//Event to accept a draggable when dragged outside the droppable
		out: function(event, ui) {
			var currentDraggable = 	$(ui.draggable).attr('id');
			$(ui.draggable).animate($(ui.draggable).data().originalLocation,"slow");
		}
    });
});
var Positioning = (function () {
    return {
		//Initializes the starting coordinates of the object
		initialize: function (object) {
			object.data("originalLocation",$(this).originalPosition= {top:0,left:0});
		},
		//Resets the object to its starting coordinates
        reset: function (object) {
            object.data("originalLocation").originalPosition = {top:0,left:0};
        },
	};
})();