JSFiddle - React, Tailwind, and code Playground

2 column drag sortable lists

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<ul id="phonetic" class="sortable boxy" style="margin-left: 1em;">
	<li>Alpha</li>
	<li>Bravo</li>
	<li>Charlie</li>
	<li>Delta</li>
</ul>
<ul id="numeric" class="sortable boxier" style="margin-right: 1em;">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
</ul>

CSS

ul.sortable li {
	position: relative;
}

ul.boxy {
	list-style-type: none;
	padding: 4px 4px 0 4px;
	margin: 0px;
	width: 10em;
	font-size: 13px;
	font-family: Arial, sans-serif;
}
ul.boxy li {
	cursor:move;
	margin-bottom: 4px;
	padding: 2px 2px;
	border: 1px solid #ccc;
	background-color: #eee;
}

ul.boxier {
	list-style-type: none;
	padding: 4px 4px 0 4px;
	margin: 0px;
	width: 10em;
	font-size: 15px;
	font-family: "Courier New", Courier, monospace;
	font-variant: small-caps;
}
ul.boxier li {
	cursor:move;
	margin-bottom: 4px;
	padding: 2px 2px;
	border: 1px solid #c00;
	background-color: #eee;
}


#phonetic {
	float: left;
	border: 1px solid red;
    width:40%;
}

#numeric {
	float: left;
	border: 1px solid red;
    width:40%;
}

JavaScript

/********************************
Code from:
http://neb.net/playground/dragdrop/
*********************************/

/**********************************************************
 Very minorly modified from the example by Tim Taylor
 http://tool-man.org/examples/sorting.html
 
 Added Coordinate.prototype.inside( northwest, southeast );
 
 **********************************************************/

var Coordinates = {
	ORIGIN : new Coordinate(0, 0),

	northwestPosition : function(element) {
		var x = parseInt(element.style.left);
		var y = parseInt(element.style.top);

		return new Coordinate(isNaN(x) ? 0 : x, isNaN(y) ? 0 : y);
	},

	southeastPosition : function(element) {
		return Coordinates.northwestPosition(element).plus(
				new Coordinate(element.offsetWidth, element.offsetHeight));
	},

	northwestOffset : function(element, isRecursive) {
		var offset = new Coordinate(element.offsetLeft, element.offsetTop);

		if (!isRecursive) return offset;

		var parent = element.offsetParent;
		while (parent) {
			offset = offset.plus(
					new Coordinate(parent.offsetLeft, parent.offsetTop));
			parent = parent.offsetParent;
		}
		return offset;
	},

	southeastOffset : function(element, isRecursive) {
		return Coordinates.northwestOffset(element, isRecursive).plus(
				new Coordinate(element.offsetWidth, element.offsetHeight));
	},

	fixEvent : function(event) {
		event.windowCoordinate = new Coordinate(event.clientX, event.clientY);
	}
};

function Coordinate(x, y) {
	this.x = x;
	this.y = y;
}

Coordinate.prototype.toString = function() {
	return "(" + this.x + "," + this.y + ")";
}

Coordinate.prototype.plus = function(that) {
	return new Coordinate(this.x + that.x, this.y + that.y);
}

Coordinate.prototype.minus = function(that) {
	return new Coordinate(this.x - that.x, this.y - that.y);
}

Coordinate.prototype.distance = function(that) {
	var deltaX = this.x - that.x;
	var deltaY = this.y - that.y;

	return Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY,...