JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<ul id="ordename">
	<li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</ul>

CSS

ul,li{margin:0;padding:0; width:300px;}
li{border:solid 1px #000;}

JavaScript

var orden;
window.onload=function(){
	orden=new Draglist('ordename');
}
var Draglist=function(target){
	var ul=document.getElementById(target);
    var target=null;
	ul.onselectstart=new Function ("return false");
    ul.onmousedown=function(e){drag(e);}
	window.onmouseup=function(e){drop(e);}
	ul.onmousemove=function(e){move(e);}

	function drag(e){
		target=e.target || e.srcElement;
        target.style.opacity='0.5';
	}
	function drop(e){
        if (target){
            target.style.opacity='1';
            target=null;
        }
	}
    function move(e){
        var current=e.target || e.srcElement;
		if(target!==current){
            var clon=target.cloneNode(true);
            current=ul.replaceChild(clon,current);
            ul.replaceChild(current,target);
            target=clon;
		}
	}
}