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-3">
      <p>foo</p>
      <p>bar</p>
    </div>
    <div class="col-xs-3">
      <p>foo</p>
      <p>bar</p>
    </div>
    <div class="col-xs-6">
      <p>foo</p>
      <p>bar</p>
    </div>
  </div>
<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>
              ...

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", "connectToSortableFixed", {
	start: function( event, ui, draggable ) {
		var uiSortable = $.extend( {}, ui, {
			item: draggable.element
		});
		draggable._parent = this.parent();
        
		draggable.sortables = [];
		$( draggable.options.connectToSortableFixed ).each(function() {
			var sortable = $( this ).sortable( "instance" );

			if ( sortable && !sortable.options.disabled ) {
				draggable.sortables.push( sortable );

				// refreshPositions is called at drag start to refresh the containerCache
				// which is used in drag. This ensures it's initialized and synchronized
				// with any changes that might have happened on the page since initialization.
				sortable.refreshPositions();
				sortable._trigger("activate", event, uiSortable);
			}
		});
	},
	stop: function( event, ui, draggable ) {
		var uiSortable = $.extend( {}, ui, {
			item: draggable.element
		});

		draggable.cancelHelperRemoval = false;

		$.each( draggable.sortables, function() {
			var sortable = this;

			if ( sortable.isOver ) {
				sortable.isOver = 0;

				// Allow this sortable to handle removing the helper
				draggable.cancelHelperRemoval = true;
				sortable.cancelHelperRemoval = false;

				// Use _storedCSS To restore properties in the sortable,
				// as this also handles revert (#9675) since the draggable
				// may have modified them in unexpected ways (#8809)
				sortable._storedCSS = {
					position: sortable.placeholder.css( "position" ),
					top: sortable.placeholder.css( "top" ),
					left: sortable.placeholder.css( "left" )
				};

				sortable._mouseStop(event);

				// Once drag has ended, the sortable should return to using
				// its original helper, not the shared helper from draggable
				sortable.options.helper = sortable.options._helper;
			} else {
				// Prevent this Sortable from removing the helper.
				// However, don't set the draggable to remove the helper
				// either as another connected Sortable may yet handle the...