JSFiddle - React, Tailwind, and code Playground

by Raymund Macaalay

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
            };
        },
    };
})();