JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="draggable">
    <div class="draggable">Drag A</div>
    <div class="draggable">Drag B</div>
    <div class="draggable">Drag C</div>
</div>

<div id="sortable1" class="sortable"></div>

<div id="sortable2" class="sortable"></div>

<div id="debug1"></div>
<div id="debug2"></div>
<div id="debug3"></div>
<div id="debug4"></div>

CSS

.sortable {
    min-height: 50px;
    width: 150px;
}

#sortable1 {
    position: relative;
    background: red;
}

#sortable2 {
    background: green;
}

.draggable {
    border : 1px black solid;
    padding: 5px;
    //margin: 5px;
}

.ui-draggable-dragging{
    background: blue;
}

JavaScript

$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "invalid"
}).disableSelection();

$(".sortable").sortable({
    revert: true,
    connectWith:   ".sortable"  
});

window.setInterval(function(){
    var helper = $(".ui-draggable-dragging");
    if(helper.length){
        $("#debug1").text("parent: " + helper.parent().attr("id"));
        $("#debug2").text(helper.css("position"));
        $("#debug3").text(helper.css("left") + ":" + helper.css("top"));
    }
    else{
        $("#debug1").text("no helper");
    }
}, 500);