JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
Drag blocks into container, and then try drag them out again to see what happens.
<div class="widget"></div>
<div class="widget"></div>
<div class="inner"></div>

CSS

body {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

.widget {
    width:100px;
    height:100px;
    position:absolute;
    background-color:grey;
    border:1px solid black;
}

.widget.dragging {
    background-color:red;
    position:absolute;
}

.inner {
    width:300px;
    height:200px;
    float:right;
    background-color:#f1f1f1;
}

.inner .widget {
    position:relative;
    top:auto !important;
    left:auto !important;
    width:100%;
}

JavaScript

$(".widget").draggable(
    {
        containment:"body",
        start: function(e,ui)
        {
            $(ui.helper).addClass("dragging");
			if($(this).parents(".inner").length > 0)
			{
				$(this).css({ 'top': e.pageY - ($(this).height()/2), 'left': e.pageX - 75 - ($(this).width()/2) }).appendTo("body");
			}
        },
        drag: function(e,ui)
        {
            
        },
        stop: function(e,ui)
        {
            setTimeout(function() {
                $(ui.helper).removeClass("dragging");
            }, 300);
        }
    });

$(".inner").droppable(
    {
        accept: "div.widget",
        over:function(e,ui)
        {
        },
        drop: function(e, ui)
        {
            $(ui.draggable).appendTo($(this)).css({ "left": "", "top":"" });
        },
        out: function(e, ui)
        {
        }
    });