drag_a_dreg.js

const LEFT_MOUSE = 0,
      DRAG_CLASS = "being-dragged";

function Draggable(el, handle) {
  handle.addEventListener("mousedown", event => {
    if (event.button != LEFT_MOUSE) { return false; }
    event.preventDefault();
    new Drag(this, event.clientY);
  });

  this.start = () => el.classList.add(DRAG_CLASS);
  this.end   = () => el.classList.remove(DRAG_CLASS);

  this.setPosition = (x, y, pos = "relative") => {
    el.style.position = pos;
    el.style.left = x ? String(x) + "px" : null;
    el.style.top  = y ? String(y) + "px" : null;
  };

  let trySwap = (sib, test, where) => {
        return () => {
          if(!el[sib]) return false;
          let rect  = el.getBoundingClientRect(),
              sRect = el[sib].getBoundingClientRect();
          if(test(rect, sRect)) {
            el[sib].insertAdjacentElement(where, el);
            return true;
          }
        };
      },
      overlapBot = (me, sib) => me.bottom >= sib.bottom,
      overlapTop = (me, sib) => me.top <= sib.top,
      swapNext   = trySwap("nextSibling",     overlapBot, "afterEnd"   ),
      swapPrev   = trySwap("previousSibling", overlapTop, "beforeBegin");

  this.didSwap = () => swapNext() || swapPrev();
}

function Drag(dreg, startY) {
  let lMoveDrag = event => dreg.setPosition(0, event.clientY - startY),
      lMoveSwap = event => {
        if(dreg.didSwap()) {
          dreg.setPosition(0, 0);
          startY = event.clientY;
        }
      },
      lDragEnd = () => {
        dreg.end();
        dreg.setPosition(null, null, null);
        document.removeEventListener("mousemove", lMoveDrag);
        document.removeEventListener("mousemove", lMoveSwap);
        document.removeEventListener("mouseup",   lDragEnd);
      },
      lDragStart = () => {
        dreg.start();
        document.addEventListener("mousemove", lMoveDrag);
        document.addEventListener("mousemove", lMoveSwap);
        document.addEventListener("mouseup",   lDragEnd);
      };

  lDragStart();
}