JSFiddle - React, Tailwind, and code Playground

by panino

HTML

<ul>
		<li style="background:red;">1</li>
		<li style="background:orange;">2</li>
		<li style="background:yellow;">3</li>
		<li style="background:green;">4</li>
		<li style="background:blue;">5</li>
		<li style="background:indigo;">6</li>
		<li style="background:violet;">7</li>
	</ul>

CSS

*{
		margin0;
		padding:0;
	}
	body{
		background: linear-gradient(to right, #ACBB78, #F7F8F8); 
	}
	ul{
		margin:50px auto;
		position:relative;
	}
	ul,li{
		display:block;
		width:400px;
		max-width:90vw;
	}
	li{
		height:50px;
		line-height:50px;
		margin:0 0 5px;
		text-align:center;
		cursor:move;
	}

JavaScript

var lis=document.querySelectorAll('li');
var ul=document.querySelector('ul');
var obj;
var initX,initY,firstX,firstY;
var arr=[].slice.call(lis);
var a=-1,b=-1;
var intercambiabilidad=0;
function indexar(arr){
	 a=-1,b=-1;
	var indice=0;
	arr.forEach(
		function(li){
			li.setAttribute('indice',indice);
			indice++;
			makeDragable(li);
		}
	);
}
function dumpCSSText(element){
  var s = '';
  var o = getComputedStyle(element);
  for(var i = 0; i < o.length; i++){
    s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
  }
  return s;
}
function makeDragable(ref){
	ref.addEventListener(
		'mousedown',
		function(e) {
			e.preventDefault();
			e.stopPropagation();
			intercambiabilidad=1;
			var clon=ref.cloneNode(1);
			clon.style.cssText = dumpCSSText(ref);
			ul.insertBefore(clon,ref);
			ref.style.position='absolute';
			ref.style.opacity='.5';
			ref.style.left=clon.offsetLeft+'px';
			ref.style.top=clon.offsetTop+'px';
			ref.style.zIndex=1000;
			obj=ref;
			a=obj.getAttribute('indice');
			initX = this.offsetLeft;
			initY = this.offsetTop;
			firstX = e.pageX;
			firstY = e.pageY;
			window.addEventListener(
				'mousemove',
				dragIt,
				false
			);
			window.addEventListener(
				'mouseup',
				function() {
					this.removeEventListener(
						'mousemove',
						dragIt,
						false
					);
					intercambiar();
				},
				false
			);
		},
		false
	);
	ref.addEventListener(
		'touchstart',
		function(e) {
			e.preventDefault();
			e.stopPropagation();
			intercambiabilidad=1;
			var clon=ref.cloneNode(1);
			clon.style.cssText = dumpCSSText(ref);
			ul.insertBefore(clon,ref);
			ref.style.position='absolute';
			ref.style.opacity='.5';
			ref.style.left=clon.offsetLeft+'px';
			ref.style.top=clon.offsetTop+'px';
			ref.style.zIndex=1000;
			obj=ref;
			a=obj.getAttribute('indice');
			initX = this.offsetLeft;
			initY = this.offsetTop;
			var touch = e.touches;
			firstX = touch[0].pageX;
			firstY =...