DragList

draglist-1779394345450.tsx

'use client'
import { useState } from 'react'

const INIT = [
  { id:1, label:'Design System Audit', priority:'P1' },
  { id:2, label:'API Integration', priority:'P2' },
  { id:3, label:'Performance Review', priority:'P1' },
  { id:4, label:'Mobile Responsiveness', priority:'P3' },
  { id:5, label:'Documentation Update', priority:'P2' },
]

export default function DragList({ items: initItems = INIT }) {
  const [items, setItems] = useState(initItems)
  const [dragging, setDragging] = useState(null)
  const [over, setOver] = useState(null)
  const colors = { P1:'#ef4444', P2:'#f59e0b', P3:'#10b981' }
  const onDrop = () => {
    if (dragging == null || over == null || dragging === over) return
    const next = [...items]
    const [removed] = next.splice(dragging, 1)
    next.splice(over, 0, removed)
    setItems(next)
    setDragging(null); setOver(null)
  }
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:'6px', maxWidth:'360px' }}>
      {items.map((item, i) => (
        <div key={item.id}
          draggable
          onDragStart={()=>setDragging(i)}
          onDragOver={e=>{e.preventDefault();setOver(i)}}
          onDragEnd={onDrop}
          style={{
            display:'flex', alignItems:'center', gap:'12px',
            background:over===i&&dragging!==i?'#f5f3ff':'#fff',
            border:'1px solid ' + (over===i&&dragging!==i?'#a78bfa':'#e2e8f0'),
            borderRadius:'10px', padding:'12px 14px',
            cursor:'grab', boxShadow:'0 1px 6px rgba(0,0,0,0.04)',
            opacity:dragging===i?0.4:1, transition:'all 0.15s',
          }}
        >
          <span style={{ color:'#94a3b8', fontSize:'18px', cursor:'grab' }}>⋮⋮</span>
          <span style={{ flex:1, fontSize:'14px', fontWeight:500, color:'#1e293b' }}>{item.label}</span>
          <span style={{ fontSize:'11px', fontWeight:700, color:colors[item.priority], background:colors[item.priority]+'20', padding:'2px 7px', borderRadius:'6px' }}>{item.priority}</span>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryLayouts

Frameworkreact

TierFREE

Copies0

About

Reorderable list with drag handles and animated transitions

More from Layouts

'use client'
import { useState, useRef, useCallback, useEffect } from 'react'

export default function SplitPane() {
  const [split, setSplit] = useState(50)
  const [dragging, setDragging] = useState(false)
  const [collapsed, setCollapsed] = useSta

SplitPane

Layouts

'use client'
import { useState } from 'react'

interface Block {
  id: number
  label: string
  color: string
  colSpan: number
  rowSpan: number
}

const INITIAL: Block[] = [
  { id: 1, label: 'Header', color: '#C9A84C', colSpan: 12, rowSpan: 1 },

GridLayout

Layouts

'use client'
import { useState } from 'react'

const ITEMS = [
  { id: 1, title: 'What is Empire UI?', content: 'Empire UI is a library of 17,500 AI-generated React components.' },
  { id: 2, title: 'How to install?', content: 'Install via npm or use

Accordion

Layouts

'use client'
import { useState, useRef, useMemo } from 'react'

const ITEM_HEIGHT = 56
const VISIBLE_COUNT = 8

const ALL_ITEMS = Array.from({ length: 10000 }, (_, i) => ({
  id: i + 1,
  name: 'Item ' + String(i+1).padStart(4,'0'),
  value: Math.flo

VirtualList

Layouts