JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<div id="drag" class="drag">
    <img src="http://www.placekitten.com/100/100" />
</div>
<div id="drag2" class="drag">
    <img src="http://www.placekitten.com/100/120" />
</div>

<div id="drop"></div>
<button id="undo" type="button">Undo</button>

CSS

#drop { background-color: yellow; width: 300px; height: 250px; }

JavaScript

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");

        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
            });
        }
    });
}

$(document).ready(function() {
    $(".drag").draggable({
        revert: "invalid"
    });
    
    $("#drop").droppable({
        drop: function(event, ui) {
            if (!ui.draggable.data("originalPosition")) {
                ui.draggable.data("originalPosition",
                    ui.draggable.data("draggable").originalPosition);
            }
        }
    });

    $("#undo").click(function() {
        revertDraggable($(".drag"));
    });
});