JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<ol id='dragableList'>
    <li draggable="true">aaaaaaaaaaaaaaaaaaaaaaa</li>
    <li draggable="true">bbbbbbbbbbbbbbbbbbbbbbb</li>
    <li draggable="true">ccccccccccccccccccccccc</li>
    <li draggable="true">ddddddddddddddddddddddd</li>
    <li draggable="true">eeeeeeeeeeeeeeeeeeeeeee</li>
</ol>

CSS

/*li:hover {
    background: #fc9;
}*/
.hovered {
    background: #fc9;
}
li.dragover {
    background: #9cf;
}
ol {
    border: 1px solid white;
}
ol.insistent {
    border-color: red;
}
ol.insistent li:hover {
    background: transparent;
}

JavaScript

var lis = document.getElementById('dragableList').querySelectorAll("li"),
    ol = document.querySelector("ol"),
    dragged = false,
    dragover = false;
ol.addEventListener("drop", function(event) {
    ol.insertBefore(dragged,dragover);
    this.classList.remove("insistent");
}, false);
for (var i=0, n = lis.length; i < n; i++) {
    lis[i].onmouseover = function() {
        this.className = this.className + " hovered";
    }
    lis[i].onmouseout = function() {
        this.className = this.className.split(' ').filter(function(v) {
            return v!='hovered'
        }).join(' ');
    }
    lis[i].addEventListener("dragstart", function(event) {
        dragged = this;
        ol.classList.add("insistent");
    }, false);
    lis[i].addEventListener("dragover", function(event) {
        if (dragover) {
            dragover.classList.remove("dragover");
        }
        event.preventDefault();
        dragover = this;
        this.classList.add("dragover");
    }, false);
}