JSFiddle - React, Tailwind, and code Playground

by SpacePineapple

HTML

<div class="drop_storage" style="display:block; height:100px; padding:10px;">
<span class="CetDraggable">JOKING</span>

<span class="CetDraggable">Bored</span>

</div>
<br/>
<br/>
<br/>
<input type="text" />
<br/>
<br/>
<input type="text" />
<br/>
<br/>

CSS

.CetDraggable {
    display:block;
    background-color:white;
    cursor:pointer;
}
.drop_storage {
    border: 1px solid black;
}

JavaScript

$(function () {
    main();
});

function main() {
    $(".CetDraggable").draggable({
        revert: function (event, ui) {
            var used = false;
            var draggableObj = $(this);
            $("div.drop_storage").each(function () {
                if (used) return;
                if (intersectRects($(this), draggableObj)) {
                    draggableObj.data("underme", null);
                    draggableObj.css("position", "relative");
                    draggableObj.css("top", "0px");
                    draggableObj.css("left", "0px");
                    used = true;
                    //draggableObj.detach().at
                }
                //Makes the draggable cover the Text Field
            });
            $("input:text").each(function () {
                if (used) return;
                if (intersectRects($(this), draggableObj)) {
                    this.value = draggableObj.text();
                    draggableObj.data("underme", this);
                    used = true;
                    setSizeAndPosition(draggableObj, $(this))
                }
                //Makes the draggable cover the Text Field
            });
            if (used === false) {
                // Drop was rejected, revert the helper.
                var $helper = $("#mydrag");
                $helper.fadeOut("slow").animate($helper.originalPosition);

                return true;
            } else {
                // Drop was accepted, don't revert.
                return false;
            }
        },
        start: function (event, ui) {
            var draggableObj = $(this);
            if (draggableObj.data("underme")) draggableObj.data("underme").value = "";
        },
        stop: function (event, ui) {
            if ($(this).data("underme")) $(this).data("underme").value = $(this).text();
        }
    });

}

function intersectRects(obj1, obj2) {
    $div1 = $(obj2);
    $div2 = $(obj1);
    var x1 = $div1.offset().left;
    var y1 =...