JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<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"));
    }
});
$(".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
    }
});