JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float:left;width:50%;">
    <fieldset id="_0_1" class="" style="float:left;width:85%;">
        <legend>To</legend>
        <div style="overflow:-moz-scrollbars-vertical!important;!overflow:hidden;height:500px;">
            <ul id="sortable" class="imglist grey ui-sortable">
                <li class="biography" id="9">ID9</li>
                <li class="biography" id="16">ID16</li>
                <li class="biography" id="1">ID1</li>
                <li class="biography" id="2">ID2</li>
                <li class="biography" id="5">ID5</li>
            </ul>
        </div>
    </fieldset>
</div>

<div style="float:left;width:50%;height:100%;">
    <fieldset id="del_del" class="droppable deleteTree ui-droppable" style="float:left;width:89%;">
        <legend>From</legend>
        <div style="overflow:-moz-scrollbars-vertical!important;!overflow:hidden;height:500px;">
            <ul class="imglist grey">
                <li class="draggable document ui-draggable" id="19" >ID19</li>
            </ul>
        </div>
    </fieldset>
</div>

JavaScript

//drag and drop magic
$("#sortable").sortable({
    start: function(event, ui) {
        $(this).effect('highlight');
    },
    dropOnEmpty: true,
    revert: true,
    update: function(event, ui) {
        console.log($(this).sortable("toArray"));
        //updatePresentationStep($(this).sortable("toArray")); <-- $.post(service.php)
        //displayDialog(dialog, type); <-- reloads the dialog where all this is displayed in (jqueryui dialog)
    }
});
$(".draggable").draggable({
    connectToSortable: "#sortable",
    containment: "#container",
    helper: "clone",
    revert: "invalid"
});
$(".droppable").droppable({
    over: function(event, ui) {
        $(this).effect('highlight');
    },
    drop: function(event, ui) {
        var draggable = ui.draggable.attr('id'); // id of element that was dragged
        var droppable = $(this).attr("id"); // id of element where it was dropped
        //deletePresentationStep(draggable);
        //displayDialog(dialog, type);
    }
});