javascript 63 lines · 8 steps

Drag-to-reorder lists in React

A React component that lets users reorder list items with the native HTML drag-and-drop API and three pieces of state.

Explained by highlit

React Intermediate drag-and-drop state-management immutable-updates event-handling

1import { useState } from 'react';
2 
3export function ReorderableList({ initialItems }) {
const [items, setItems] = useState(initialItems);
const [draggingId, setDraggingId] = useState(null);
const [overId, setOverId] = useState(null);
7 
const handleDragStart = (event, id) => {
  setDraggingId(id);
  event.dataTransfer.effectAllowed = 'move';
  event.dataTransfer.setData('text/plain', String(id));
};
13 
const handleDragOver = (event, id) => {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
  if (id !== overId) setOverId(id);
};
19 
const handleDrop = (event, targetId) => {
  event.preventDefault();
  if (draggingId === null || draggingId === targetId) return;
23 
  setItems((prev) => {
    const next = [...prev];
    const from = next.findIndex((item) => item.id === draggingId);
    const to = next.findIndex((item) => item.id === targetId);
    const [moved] = next.splice(from, 1);
    next.splice(to, 0, moved);
    return next;
  });
};
33 
const handleDragEnd = () => {
  setDraggingId(null);
  setOverId(null);
};
38 
return (
  <ul className="reorderable-list">
    {items.map((item) => (
      <li
        key={item.id}
        draggable
        onDragStart={(e) => handleDragStart(e, item.id)}
        onDragOver={(e) => handleDragOver(e, item.id)}
        onDrop={(e) => handleDrop(e, item.id)}
        onDragEnd={handleDragEnd}
        className={[
          'reorderable-item',
          draggingId === item.id && 'is-dragging',
          overId === item.id && draggingId !== item.id && 'is-over',
        ]
          .filter(Boolean)
          .join(' ')}
      >
        <span className="drag-handle" aria-hidden="true">≡</span>
        {item.label}
      </li>
    ))}
  </ul>
);
63}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Tracking the dragged item and hover target in state lets you compute both the reorder and the visual feedback.
2Reordering immutably with a copied array plus splice keeps React's state updates predictable.
3The native HTML drag-and-drop API needs preventDefault on dragover and drop for a drop to register.

Related explainers

javascript

import { useCallback, useEffect, useState } from 'react';
 
export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {

How a useLocalStorage hook syncs state in React

custom hooks localstorage state persistence

Intermediate 8 steps

javascript

import { unstable_cache, revalidateTag } from 'next/cache'
import { db } from '@/lib/db'
 
export const getDashboardStats = unstable_cache(

Caching dashboard stats in Next.js

caching cache-invalidation tag-based-revalidation

Intermediate 8 steps

javascript

import { Component } from 'react';
import { reportError } from './services/telemetry';
 
export class ErrorBoundary extends Component {

How a React ErrorBoundary works

error-handling lifecycle-methods render-props

Intermediate 8 steps

typescript

import { useCallback, useEffect, useRef, useState } from "react";
 
interface UseResendCooldownOptions {
  cooldownSeconds?: number;

A resend cooldown hook in React

custom-hooks timers state-management

Intermediate 7 steps

javascript

const FOCUSABLE = [
  'a[href]',
  'button:not([disabled])',
  'input:not([disabled])',

How to trap keyboard focus in a dialog

accessibility dom event-handling

Intermediate 8 steps

javascript

function generateCalendarGrid(year, month) {
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const daysInMonth = lastDay.getDate();