Draggable List

HTML

CSS

JS

const list = document.getElementById("sortableList");
let draggingEl = null;
Array.from(list.children).forEach(item => {
  item.addEventListener("dragstart", () => {
    draggingEl = item;
    item.classList.add("dragging");
  });
  item.addEventListener("dragend", () => {
    draggingEl = null;
    item.classList.remove("dragging");
    Array.from(list.children).forEach(i => i.classList.remove("drop-zone"));
  });
  item.addEventListener("dragover", e => {
    e.preventDefault();
    if (item !== draggingEl) {
      const isAbove = e.clientY < item.getBoundingClientRect().top + item.offsetHeight / 2;
      list.insertBefore(draggingEl, isAbove ? item : item.nextSibling);
      Array.from(list.children).forEach(i => i.classList.remove("drop-zone"));
      item.classList.add("drop-zone");
    }
  });
  item.addEventListener("dragleave", () => {
    item.classList.remove("drop-zone");
  });
  item.addEventListener("drop", e => {
    e.preventDefault();
    item.classList.remove("drop-zone");
  });
});

Ad #1

Ad #2