JSFiddle - React, Tailwind, and code Playground

by Adam Boduch

HTML

<ul id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

li {
    cursor: move;
    margin: 1px;
    padding: 5px 20px;
    font-size: 20px;
    background-color: #ccc;
}

.ghost {
    opacity: .4;
}

JavaScript

function sortable(root) {
	var dragEl;
    
	root.childNodes.forEach(childNode => {
  	childNode.draggable = true;
 	});
    
	function _onDragOver(e) {
		e.preventDefault();
		e.dataTransfer.dropEffect = 'move';
       
		if (e.target instanceof HTMLLIElement) {
    	if (root.children[0] === e.target) {
      	root.insertBefore(dragEl, e.target);
      } else {
      	root.insertBefore(dragEl, e.target.nextSibling);
      }
		}
	}
    
	function _onDragEnd(e) {
		e.preventDefault();

		dragEl.classList.remove('ghost');
		root.removeEventListener('dragover', _onDragOver, false);
		root.removeEventListener('dragend', _onDragEnd, false);
	}
    
	root.addEventListener('dragstart', (e) => {
		dragEl = e.target;
        
		e.dataTransfer.effectAllowed = 'move';
		e.dataTransfer.setData('Text', dragEl.textContent);

		root.addEventListener('dragover', _onDragOver, false);
    root.addEventListener('dragend', _onDragEnd, false);        		         					dragEl.classList.add('ghost');
  }, false);
}
                         
sortable(document.getElementById('list'));