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 {
}

JavaScript

$(".widget").draggable({
    containment: "body",
    cursorAt: {
        top: 50,
        left: 50
    },
    start: function (e, ui) {
      
        if ($(this).parents(".inner").length > 0) {

            $(ui.helper).addClass("dragging");
            ui.helper.css({
                'width': '100px',
                    'left': '0px',
                    'top': '0px'
            });
            
            ui.helper.data()['ui-draggable'].containment = [0,0,$('body').width(), $('body').height()]
           
            ui.helper.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": "",
                "width": "100%"
        });
    },
    out: function (e, ui) {}
});