HardFrontend6 min read

Implement a Drag-and-Drop List Reordering Utility Without a Library

Q: Implement a Drag-and-Drop List Reordering Utility Without a Library

**Target Audience:** Engineers preparing for practical JavaScript coding interviews. **Difficulty:** Hard > **How to read this doc:** the CORE, testable piece of drag-and-drop reordering — a pure array-move function, cleanly separated from real, harder-to-test pointer-event wiring — was verified directly across 3 real moves plus a same-index no-op, confirming correct, non-mutating behavior every time. ## 1. The problem, restated Drag-and-drop reordering genuinely splits into two SEPARATE concerns: (1) a pure, testable array-reordering function taking a from-index and a to-index and returning the reordered result, and (2) the real, event-driven WIRING (pointer-down, pointer-move, pointer-up) that determines what those from/to indices actually ARE during a live drag gesture. This question focuses on building and verifying piece (1) correctly, since it is the genuinely testable core logic that piece (2) ultimately depends on. ## 2. Clarifying questions a strong candidate asks | Quest

205 views

153 of 154

The problem

Problem, as an interviewer would state it: "Implement the CORE reordering logic for a drag-and-drop sortable list — given the array, the dragged item index, and the drop target index — WITHOUT using any external library."

Examples:

Code

reorder(["a","b","c","d","e"], 0, 3); // ["b","c","d","a","e"] -- "a" moved to position 3

Clarifying questions expected:

Should this function mutate the input array in place, or return a brand-new array?
Should this be a general PURE reordering function, separate from the real POINTER-EVENT wiring that determines the from/to indices during an actual drag gesture?
What happens if fromIndex equals toIndex — should it genuinely be a safe no-op?

Code / implementation expected: Yes — real, direct proof of the pure reorder logic across multiple real moves, including a same-index no-op and confirming the original array is genuinely untouched.

dom
drag-and-drop
events

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for practical JavaScript coding interviews. Difficulty: Hard

How to read this doc: the CORE, testable piece of drag-and-drop reordering — a pure array-move function, cleanly separated from real, harder-to-test pointer-event wiring — was verified directly across 3 real moves plus a same-index no-op, confirming correct, non-mutating behavior every time.

1. The problem, restated

Drag-and-drop reordering genuinely splits into two SEPARATE concerns: (1) a pure, testable array-reordering function taking a from-index and a to-index and returning the reordered result, and (2) the real, event-driven WIRING (pointer-down, pointer-move, pointer-up) that determines what those from/to indices actually ARE during a live drag gesture. This question focuses on building and verifying piece (1) correctly, since it is the genuinely testable core logi

The solution is hidden so you can try first

6 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof: the pure reorder() function correctly handles moving an item later, earlier, and a same-index no-op, all non-mutating

Practice

Discussion

Other approaches, follow-ups and how it went in real interviews.

No comments yet. Share how you would answer it.

Question 153 of 154 in JavaScript coding

Keep your momentum going.

Mark this question solved to track your progress, then take the next one while it is fresh.

All JavaScript coding questions

Up nextHard→

Implement a Circuit Breaker for Flaky API Calls

Continue