Drag and Drop List

Question

Implement a list where items can be reordered via drag and drop.

Accepted Answer

import './index.css'; import React, { useState, useRef } from 'react'; const initial = ['Item 1', 'Item 2', 'Item 3', 'Item 4']; function App() { const [items, setItems] = useState(initial); const dragItem = useRef(); const dragOver = useRef(); const handleDragStart = idx => dragItem.current = idx; const handleDragEnter = idx => dragOver.current = idx; const handleDrop = () => { const copy = [...items]; const [removed] = copy.splice(dragItem.current, 1); copy.splice(dragOver.current, 0, removed); setItems(copy); }; return (

Drag and Drop List

handleDragStart(idx)} onDragEnter={() => handleDragEnter(idx)} onDragEnd={handleDrop} >{item}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .dd-list { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; } .dd-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .dd-ul { list-style: none; padding: 0; } .dd-li { padding: 0.7rem 1.2rem; background: #f1f5f9; border-radius: 8px; margin-bottom: 0.5rem; cursor: grab; border: 1px solid #e5e7eb; } .dd-li:active { background: #dbeafe; }