JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class='container-fluid'>
    <div class='row'>
        <div class='col-xs-6'>
            <div id='sortables'>
                <div class='sortable-container'>
                    <ul class='sortable'>
                        <li>sortable 1</li>
                        <li>sortable 2</li>
                        <li>sortable 3</li>
                        <li>sortable 4</li>
                        <li>sortable 5</li>
                        <li>sortable 6</li>
                    </ul>
                </div>
                <div class='sortable-container'>
                    <ul class='sortable'>
                        <li>sortable 1</li>
                        <li>sortable 2</li>
                        <li>sortable 3</li>
                        <li>sortable 4</li>
                        <li>sortable 5</li>
                        <li>sortable 6</li>
                    </ul>
                </div>
                <div class='sortable-container'>
                    <ul class='sortable'>
                        <li>sortable 1</li>
                        <li>sortable 2</li>
                        <li>sortable 3</li>
                        <li>sortable 4</li>
                        <li>sortable 5</li>
                        <li>sortable 6</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class='col-xs-6'>
            <ul id='draggables'>
                <li class='draggable'>draggable 1</li>
                <li class='draggable'>draggable 2</li>
                <li class='draggable'>draggable 3</li>
            </ul>
        </div>
    </div>
</div>

CSS

.sortable-container {
    display: inline-block;
    width: 100px;
    vertical-align: top;
}
.sortable {
    cursor: move;
    margin: 0;
    padding: 0;
    list-style-type: none;
    vertical-align: top;
    border: 1px solid #000;
}
.ui-sortable-placeholder {
    background: #ff0000;
}
#draggables {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.draggable {
    margin: 4px;
    cursor: move;
    color: #fff;
    background: #5dd1ff;
}

JavaScript

$.ui.plugin.add("draggable", "connectToSortable104", {
    start: function (event, ui, draggable) {

        var inst = $(this).data("ui-draggable"),
            o = inst.options,
            uiSortable = $.extend({}, ui, {
                item: inst.element
            });
        inst.sortables = [];
        $(draggable.options.connectToSortable104).each(function () {
            var sortable = $(this).sortable("instance");
            if (sortable && !sortable.options.disabled) {
                inst.sortables.push({
                    instance: sortable,
                    shouldRevert: sortable.options.revert
                });
                sortable.refreshPositions(); // Call the sortable's refreshPositions at drag start to refresh the containerCache since the sortable container cache is used in drag and needs to be up to date (this will ensure it's initialised as well as being kept in step with any changes that might have happened on the page).
                sortable._trigger("activate", event, uiSortable);
            }
        });

    },
    stop: function (event, ui, draggable) {

        //If we are still over the sortable, we fake the stop event of the sortable, but also remove helper
        var inst = $(this).data("ui-draggable"),
            uiSortable = $.extend({}, ui, {
                item: inst.element
            });

        $.each(inst.sortables, function () {
            if (this.instance.isOver) {

                this.instance.isOver = 0;

                inst.cancelHelperRemoval = true; //Don't remove the helper in the draggable instance
                this.instance.cancelHelperRemoval = false; //Remove it in the sortable instance (so sortable plugins like revert still work)

                //The sortable revert is supported, and we have to set a temporary dropped variable on the draggable to support revert: "valid/invalid"
                if (this.shouldRevert) {
                    this.instance.options.revert =...