JSFiddle - React, Tailwind, and code Playground

by paulbarrett

HTML

<div id="tabs-left" class="tab-pane">
   <ul class="tabs">
    <li>Nunc tincidunt</li>
    <li>Proin dolor</li>
    <li>Aenean lacinia</li>
    </ul>
</div>
<!--right side-->
<div id="tabs-right" class="tab-pane">
   <ul class="tabs">
    <li>Tagclouds</li>
    <li>Synergy</li>
    <li>Clicks and mortar</li>
    </ul>
</div>

CSS

.tab-pane {
   float:left; 
  margin-right: 20px;
}

JavaScript

$( "ul.tabs li" ).draggable({
		connectToSortable : '.tabs',
		helper : 'clone',
		revert : 'invalid',
		cursor : 'move'
	});
	$( "ul.tabs" ).droppable({
		accept: "ul.tabs li",
		drop : function (ev, ui) {
		}
	}).sortable({
		//axis: "x",
		connectWith : $("ul.tabs"),
		receive: function (ev, ui) {
			ui.item.remove();
		}
	});