Drag & Drop List

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.demo {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.demo-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
}

.demo-hint {
  font-size: 0.8rem;
  color: #475569;
}

/* ── Drag list ── */
.drag-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.drag-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s
    ease;
  user-select: none;
}

.drag-item.dragging {
  opacity: 0.45;
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.2);
}

.drag-item.drop-above {
  border-top: 2px solid #38bdf8;
}
.drag-item.drop-below {
  border-bottom: 2px solid #38bdf8;
}

.drag-handle {
  color: #334155;
  font-size: 1.25rem;
  cursor: grab;
  line-height: 1;
  transition: color 0.15s ease;
}

.drag-item:hover .drag-handle {
  color: #64748b;
}
.drag-handle:active {
  cursor: grabbing;
}

.drag-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.drag-text {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: #e2e8f0;
}

.drag-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #64748b;
}

(function () {
  "use strict";

  const list = document.getElementById("drag-list");
  let dragged = null;

  // Delegate drag events from the list
  list.addEventListener("dragstart", (e) => {
    const item = e.target.closest(".drag-item");
    if (!item) return;
    dragged = item;
    item.classList.add("dragging");
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", item.dataset.id);
  });

  list.addEventListener("dragend", () => {
    if (!dragged) return;
    dragged.classList.remove("dragging");
    clearDropHints();
    dragged = null;
  });

  list.addEventListener("dragover", (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";

    const item = e.target.closest(".drag-item");
    if (!item || item === dragged) return;

    clearDropHints();

    const rect = item.getBoundingClientRect();
    const midY = rect.top + rect.height / 2;

    if (e.clientY < midY) {
      item.classList.add("drop-above");
    } else {
      item.classList.add("drop-below");
    }
  });

  list.addEventListener("dragleave", (e) => {
    // Only clear if we've actually left the list
    if (!list.contains(e.relatedTarget)) clearDropHints();
  });

  list.addEventListener("drop", (e) => {
    e.preventDefault();
    const item = e.target.closest(".drag-item");
    if (!item || item === dragged) {
      clearDropHints();
      return;
    }

    const rect = item.getBoundingClientRect();
    const midY = rect.top + rect.height / 2;

    if (e.clientY < midY) {
      list.insertBefore(dragged, item);
    } else {
      list.insertBefore(dragged, item.nextSibling);
    }

    clearDropHints();
  });

  function clearDropHints() {
    list.querySelectorAll(".drop-above, .drop-below").forEach((el) => {
      el.classList.remove("drop-above", "drop-below");
    });
  }
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Drag & Drop List</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="demo">
    <h2 class="demo-title">Drag to Reorder</h2>
    <p class="demo-hint">Drag the handle to reorder items</p>

    <ul class="drag-list" id="drag-list">
      <li class="drag-item" draggable="true" data-id="1">
        <span class="drag-handle" aria-hidden="true">⠿</span>
        <span class="drag-icon">🎨</span>
        <span class="drag-text">Design System</span>
        <span class="drag-badge">UI</span>
      </li>
      <li class="drag-item" draggable="true" data-id="2">
        <span class="drag-handle" aria-hidden="true">⠿</span>
        <span class="drag-icon">⚙️</span>
        <span class="drag-text">API Integration</span>
        <span class="drag-badge">DEV</span>
      </li>
      <li class="drag-item" draggable="true" data-id="3">
        <span class="drag-handle" aria-hidden="true">⠿</span>
        <span class="drag-icon">📊</span>
        <span class="drag-text">Analytics Dashboard</span>
        <span class="drag-badge">DATA</span>
      </li>
      <li class="drag-item" draggable="true" data-id="4">
        <span class="drag-handle" aria-hidden="true">⠿</span>
        <span class="drag-icon">🔒</span>
        <span class="drag-text">Auth & Permissions</span>
        <span class="drag-badge">SEC</span>
      </li>
      <li class="drag-item" draggable="true" data-id="5">
        <span class="drag-handle" aria-hidden="true">⠿</span>
        <span class="drag-icon">🚀</span>
        <span class="drag-text">CI/CD Pipeline</span>
        <span class="drag-badge">OPS</span>
      </li>
    </ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

A smooth drag-and-drop sortable list using the native HTML5 Drag and Drop API — no libraries, no dependencies. Items reorder in real-time as you drag over them.

How it works

Each <li> has draggable="true" and a drag handle icon
dragstart stores a reference to the dragged element
dragover on sibling items determines insertion point (before or after) using getBoundingClientRect midpoint
The list re-inserts the dragged node in real-time via insertBefore / appendChild
Visual feedback: dragged item gets .dragging opacity; hovered items get a top/bottom border hint

Accessibility note

The native drag API has limited keyboard/screen-reader support. For production, pair with a keyboard-accessible fallback (arrow keys to move items).

When to use it

Todo / task list ordering
Kanban column sorting
Dashboard widget rearrangement