1. Create the draggable items by attaching the draggable property – <div draggable>Drag This</div>
2. Define the dropzone – <div id="drop">Drop Here</div>
3. Attach a drop listener in Javascript – document.getElementById("drop").addEventListener("drop", function(){ DO SOMETHING });

<!-- (A) LOAD CSS + JS -->
<link rel="stylesheet" href="sort-list.css"/>
<script src="sort-list.js"></script>
 
<!-- (B) THE LIST -->
<ul id="sortlist">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Forth</li>
  <li>Fifth</li>
</ul>
 
<!-- (C) INIT ON PAGE LOAD -->
<script>
window.addEventListener("DOMContentLoaded", function(){
  slist("sortlist");
});
</script>

• A – Load the CSS and Javascript. Doh.
• B – Define the <ul> or <ol> as usual. Take note that this simple example will only work with a flat one-level list.
• C – Use the slist(TARGET) function on window load to initiate the sortable list.

/* (A) LIST STYLES */
.slist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.slist li {
  margin: 5px;
  padding: 10px;
  border: 1px solid #333;
  background: #eaeaea;
}

/* (B) DRAG-AND-DROP HINT */
.slist li.hint { background: #fea; }
.slist li.active { background: #ffd4d4; }

/* (X) DOES NOT MATTER */
html, body { font-family: arial, sans-serif; }

• A – The Javascript will attach a .slist class on the container. In this section, we remove the default bullet points and make the list look a little better.
• B – The .hint class is used to highlight the possible dropzones, and .active when the draggable is hovering over the dropzone.

function slist (target) {
  // (A) GET LIST + ATTACH CSS CLASS
  target = document.getElementById(target);
  target.classList.add("slist");

  // (B) MAKE ITEMS DRAGGABLE + SORTABLE
  var items = target.getElementsByTagName("li"), current = null;
  for (let i of items) {
    // (B1) ATTACH DRAGGABLE
    i.draggable = true;
    
    // (B2) DRAG START - YELLOW HIGHLIGHT DROPZONES
    i.addEventListener("dragstart", function (ev) {
      current = this;
      for (let it of items) {
        if (it != current) { it.classList.add("hint"); }
      }
    });
    
    // (B3) DRAG ENTER - RED HIGHLIGHT DROPZONE
    i.addEventListener("dragenter", function (ev) {
      if (this != current) { this.classList.add("active"); }
    });

    // (B4) DRAG LEAVE - REMOVE RED HIGHLIGHT
    i.addEventListener("dragleave", function () {
      this.classList.remove("active");
    });

    // (B5) DRAG END - REMOVE ALL HIGHLIGHTS
    i.addEventListener("dragend", function () {
      for (let it of items) {
        it.classList.remove("hint");
        it.classList.remove("active");
      }
    });
 
    // (B6) DRAG OVER - PREVENT THE DEFAULT "DROP", SO WE CAN DO OUR OWN
    i.addEventListener("dragover", function (evt) {
      evt.preventDefault();
    });
 
    // (B7) ON DROP - DO SOMETHING
    i.addEventListener("drop", function (evt) {
      evt.preventDefault();
      if (this != current) {
        let currentpos = 0, droppedpos = 0;
        for (let it=0; it<items.length; it++) {
          if (current == items[it]) { currentpos = it; }
          if (this == items[it]) { droppedpos = it; }
        }
        if (currentpos < droppedpos) {
          this.parentNode.insertBefore(current, this.nextSibling);
        } else {
          this.parentNode.insertBefore(current, this);
        }
      }
    });
  }
}

• A – First, we get the specified <ul> or <ol>. Attach a .slist CSS class to it.
• B – Get all the <li>, attach a whole load of drag-and-drop listeners.
  • B1 – Set <li draggable>.
  • B2 – On drag start, attach .hint to highlight all the possible drop zones.
  • B3 – When the dragged element hovers a dropzone, attach .active to show a different highlight color.
  • B4 – When the dragged element leaves a dropzone, detach .active.
  • B5 – When the drag stops, remove all .hint and .active CSS classes.
  • B6 – Necessary… Prevents the default browser action, so we can define our own.
  • B7 – Some Math. Does the actual sorting on dropped.