JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:300px; height: 200px; padding:5px; border:1px solid black; overflow: hidden">
    <div id="myDiv" style="width:90px; height: 50px; background-color: red; text-align: center; float: left">Drag simple</div>
    <div id="myDivWithHelper" style="width:90px; height: 50px; background-color: red; text-align: center; float:right">Drag with helper</div>
</div>

JavaScript

$("#myDiv").draggable({
    revert: true
});

$("#myDivWithHelper").draggable({
    helper: 'clone',
    appendTo: 'body',
    revert: true
});

$("#myDivWithHelper").bind('dragstart', function () {
    $(this).hide();
});

$("#myDivWithHelper").bind('dragstop', function () {
    //at this point the clone will be deleted by the plugin
    $(this).show();
})