How to Build a Drag and Drop List in an Interview

How to Build a Drag and Drop List in an Interview

The drag and drop list tests the HTML Drag and Drop API and state management. Here is how to build it.

Requirements

• A list of items that can be reordered by dragging.
• Visual feedback during drag (highlight, placeholder).
• Drop to reorder.
• Smooth reordering.

Plan (5 minutes)

1. HTML: a list of draggable items.
2. State: array of items, dragged index.
3. Events: dragstart, dragover, drop, dragend.
4. CSS: draggable styling, drag-over highlight.

Build Core (50 minutes)

HTML

<ul class="drag-list" id="dragList">
  <li class="drag-item" draggable="true">Item 1</li>
  <li class="drag-item" draggable="true">Item 2</li>
  <li class="drag-item" draggable="true">Item 3</li>
  <li class="drag-item" draggable="true">Item 4</li>
</ul>

JavaScript

let draggedIndex = null;
const list = document.getElementById("dragList");

list.addEventListener("dragstart", (e) => {
  draggedIndex = Array.from(list.children).indexOf(e.target);
  e.target.classList.add("dragging");
  e.dataTransfer.effectAllowed = "move";
});

list.addEventListener("dragover", (e) => {
  e.preventDefault();
  const target = e.target.closest(".drag-item");
  if (!target) return;
  const targetIndex = Array.from(list.children).indexOf(target);
  if (draggedIndex < targetIndex) {
    list.insertBefore(list.children[draggedIndex], target.nextSibling);
  } else {
    list.insertBefore(list.children[draggedIndex], target);
  }
  draggedIndex = targetIndex;
});

list.addEventListener("dragend", (e) => {
  e.target.classList.remove("dragging");
  draggedIndex = null;
});

CSS

.drag-list { list-style: none; padding: 0; max-width: 300px; }
.drag-item {
  padding: 12px; margin: 4px 0; background: #f0f0f0;
  border: 1px solid #ddd; border-radius: 4px; cursor: grab;
}
.drag-item.dragging { opacity: 0.5; cursor: grabbing; }
.drag-item:hover { background: #e0e0e0; }

Edge Cases (20 minutes)

• Dragging to the same position (no change).
• Dragging outside the list (ignore).
• Touch devices (HTML5 DnD does not work on touch; use a library or touch events).
• Data array sync (keep a JS array in sync with the DOM order).
• Multiple lists (drag between lists).

Syncing Data

function syncData() {
  const items = Array.from(list.children).map((li) => li.textContent);
  console.log("Current order:", items);
}
list.addEventListener("dragend", syncData);

The Takeaway

Build the drag and drop list: HTML (draggable items), JavaScript (dragstart to store index, dragover to reorder, drop/dragend to finalize), CSS (opacity for dragging, cursor states). Handle edge cases (same position, touch, data sync). This tests the Drag and Drop API and DOM manipulation.