Reorder

Drag-and-drop reorderable lists with handles, drop indicators, and edit mode for iOS-style list management.

Basic Reorder List

Preview

Dashboard Overview

ERPlora main dashboard widgets

Sales Report

Monthly revenue analytics

Inventory Check

Stock levels and reorder alerts

Team Schedule

Employee shifts and availability

<div class="reorder-group reorder-group-editing">
  <div class="reorder-item">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <div class="reorder-handle-lines">
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
        </div>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0.75rem 0.75rem 0.75rem 0;">
      <div style="font-weight: 500;">Dashboard Overview</div>
      <div style="font-size: 0.8125rem; opacity: 0.6;">ERPlora main dashboard widgets</div>
    </div>
  </div>
  <div class="reorder-item">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <div class="reorder-handle-lines">
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
        </div>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0.75rem 0.75rem 0.75rem 0;">
      <div style="font-weight: 500;">Sales Report</div>
      <div style="font-size: 0.8125rem; opacity: 0.6;">Monthly revenue analytics</div>
    </div>
  </div>
  <div class="reorder-item">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <div class="reorder-handle-lines">
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
        </div>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0.75rem 0.75rem 0.75rem 0;">
      <div style="font-weight: 500;">Inventory Check</div>
      <div style="font-size: 0.8125rem; opacity: 0.6;">Stock levels and reorder alerts</div>
    </div>
  </div>
  <div class="reorder-item">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <div class="reorder-handle-lines">
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
        </div>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0.75rem 0.75rem 0.75rem 0;">
      <div style="font-weight: 500;">Team Schedule</div>
      <div style="font-size: 0.8125rem; opacity: 0.6;">Employee shifts and availability</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative select-none">
  <div class="relative flex items-center bg-base-100 transition-all">
    <div class="flex items-center justify-center p-4 w-11 h-11 cursor-grab text-base-content/30" style="touch-action: none;">
      <div class="flex flex-col gap-[3px]">
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
      </div>
    </div>
    <div class="flex-1 min-w-0 py-3 pr-3">
      <div class="font-medium">Dashboard Overview</div>
      <div class="text-[0.8125rem] opacity-60">ERPlora main dashboard widgets</div>
    </div>
  </div>
  <div class="relative flex items-center bg-base-100 transition-all">
    <div class="flex items-center justify-center p-4 w-11 h-11 cursor-grab text-base-content/30" style="touch-action: none;">
      <div class="flex flex-col gap-[3px]">
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
      </div>
    </div>
    <div class="flex-1 min-w-0 py-3 pr-3">
      <div class="font-medium">Sales Report</div>
      <div class="text-[0.8125rem] opacity-60">Monthly revenue analytics</div>
    </div>
  </div>
  <div class="relative flex items-center bg-base-100 transition-all">
    <div class="flex items-center justify-center p-4 w-11 h-11 cursor-grab text-base-content/30" style="touch-action: none;">
      <div class="flex flex-col gap-[3px]">
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
      </div>
    </div>
    <div class="flex-1 min-w-0 py-3 pr-3">
      <div class="font-medium">Inventory Check</div>
      <div class="text-[0.8125rem] opacity-60">Stock levels and reorder alerts</div>
    </div>
  </div>
  <div class="relative flex items-center bg-base-100 transition-all">
    <div class="flex items-center justify-center p-4 w-11 h-11 cursor-grab text-base-content/30" style="touch-action: none;">
      <div class="flex flex-col gap-[3px]">
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
        <div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div>
      </div>
    </div>
    <div class="flex-1 min-w-0 py-3 pr-3">
      <div class="font-medium">Team Schedule</div>
      <div class="text-[0.8125rem] opacity-60">Employee shifts and availability</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Basic drag-and-drop reorder
const group = document.querySelector('.reorder-group');
let dragItem = null;

group.querySelectorAll('.reorder-handle').forEach(handle => {
  handle.addEventListener('mousedown', (e) => {
    dragItem = handle.closest('.reorder-item');
    dragItem.classList.add('reorder-item-dragging');
  });
});

document.addEventListener('mousemove', (e) => {
  if (!dragItem) return;
  // Move item with cursor and detect drop position
});

document.addEventListener('mouseup', () => {
  if (!dragItem) return;
  dragItem.classList.remove('reorder-item-dragging');
  dragItem = null;
});

Inset (Card-Style) with Edit Mode

Preview

ERPlora Modules

Point of Sale

Inventory Management

HR & Payroll

Analytics Dashboard

<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;">
  <span style="font-weight: 600;">ERPlora Modules</span>
  <button onclick="this.closest('div').nextElementSibling.classList.toggle('reorder-group-editing')" style="font-size: 0.875rem; color: var(--color-primary); background: none; border: none; cursor: pointer;">Edit</button>
</div>
<div class="reorder-group reorder-group-inset reorder-group-editing">
  <div class="reorder-item">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <div class="reorder-handle-lines">
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
        </div>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0.75rem 0;">
      <div style="font-weight: 500;">Point of Sale</div>
    </div>
    <div class="reorder-delete">
      <svg class="reorder-delete-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </div>
  </div>
  <div class="reorder-item">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <div class="reorder-handle-lines">
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
        </div>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0.75rem 0;">
      <div style="font-weight: 500;">Inventory Management</div>
    </div>
    <div class="reorder-delete">
      <svg class="reorder-delete-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </div>
  </div>
  <div class="reorder-item">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <div class="reorder-handle-lines">
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
        </div>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0.75rem 0;">
      <div style="font-weight: 500;">HR & Payroll</div>
    </div>
    <div class="reorder-delete">
      <svg class="reorder-delete-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </div>
  </div>
  <div class="reorder-item">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <div class="reorder-handle-lines">
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
          <div class="reorder-handle-line"></div>
        </div>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0.75rem 0;">
      <div style="font-weight: 500;">Analytics Dashboard</div>
    </div>
    <div class="reorder-delete">
      <svg class="reorder-delete-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-center justify-between mb-3">
  <span class="font-semibold">ERPlora Modules</span>
  <button class="text-sm text-primary bg-transparent border-none cursor-pointer">Edit</button>
</div>
<div class="mx-6 overflow-hidden rounded-box bg-base-100">
  <div class="relative flex items-center border-b border-base-300">
    <div class="flex items-center justify-center p-4 w-11 h-11 cursor-grab text-base-content/30"><div class="flex flex-col gap-[3px]"><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div></div></div>
    <div class="flex-1 min-w-0 py-3"><div class="font-medium">Point of Sale</div></div>
    <div class="flex items-center justify-center h-full w-11 bg-error text-white cursor-pointer"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
  </div>
  <div class="relative flex items-center border-b border-base-300">
    <div class="flex items-center justify-center p-4 w-11 h-11 cursor-grab text-base-content/30"><div class="flex flex-col gap-[3px]"><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div></div></div>
    <div class="flex-1 min-w-0 py-3"><div class="font-medium">Inventory Management</div></div>
    <div class="flex items-center justify-center h-full w-11 bg-error text-white cursor-pointer"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
  </div>
  <div class="relative flex items-center border-b border-base-300">
    <div class="flex items-center justify-center p-4 w-11 h-11 cursor-grab text-base-content/30"><div class="flex flex-col gap-[3px]"><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div></div></div>
    <div class="flex-1 min-w-0 py-3"><div class="font-medium">HR & Payroll</div></div>
    <div class="flex items-center justify-center h-full w-11 bg-error text-white cursor-pointer"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
  </div>
  <div class="relative flex items-center">
    <div class="flex items-center justify-center p-4 w-11 h-11 cursor-grab text-base-content/30"><div class="flex flex-col gap-[3px]"><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div><div class="w-4 h-0.5 rounded-sm bg-base-content/30"></div></div></div>
    <div class="flex-1 min-w-0 py-3"><div class="font-medium">Analytics Dashboard</div></div>
    <div class="flex items-center justify-center h-full w-11 bg-error text-white cursor-pointer"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
  </div>
</div>

Requires: tw.min.css

// Toggle edit mode
const editBtn = document.querySelector('[data-edit-toggle]');
const group = document.querySelector('.reorder-group');

editBtn.addEventListener('click', () => {
  const isEditing = group.classList.toggle('reorder-group-editing');
  editBtn.textContent = isEditing ? 'Done' : 'Edit';
});

// Handle delete buttons (visible only in edit mode)
group.querySelectorAll('.reorder-delete').forEach(btn => {
  btn.addEventListener('click', () => {
    const item = btn.closest('.reorder-item');
    item.style.opacity = '0';
    item.style.height = '0';
    setTimeout(() => item.remove(), 200);
  });
});

Cards Variant with Dragging State

Preview

ERPlora Warehouse A

Barcelona -- 2,400 items in stock

ERPlora Warehouse B

Madrid -- 1,850 items in stock

ERPlora Warehouse C

Valencia -- 980 items in stock

ERPlora Warehouse D

Sevilla -- 1,120 items in stock

<div class="reorder-group reorder-group-cards reorder-group-editing">
  <div class="reorder-item" style="padding: 1rem;">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <svg class="reorder-handle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0 0.5rem;">
      <div style="font-weight: 600; margin-bottom: 0.25rem;">ERPlora Warehouse A</div>
      <div style="font-size: 0.8125rem; opacity: 0.6;">Barcelona -- 2,400 items in stock</div>
    </div>
    <div class="reorder-indicator reorder-indicator-bottom"></div>
  </div>
  <div class="reorder-item reorder-item-dragging" style="padding: 1rem;">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <svg class="reorder-handle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0 0.5rem;">
      <div style="font-weight: 600; margin-bottom: 0.25rem;">ERPlora Warehouse B</div>
      <div style="font-size: 0.8125rem; opacity: 0.6;">Madrid -- 1,850 items in stock</div>
    </div>
  </div>
  <div class="reorder-item reorder-item-ghost" style="padding: 1rem;">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <svg class="reorder-handle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0 0.5rem;">
      <div style="font-weight: 600; margin-bottom: 0.25rem;">ERPlora Warehouse C</div>
      <div style="font-size: 0.8125rem; opacity: 0.6;">Valencia -- 980 items in stock</div>
    </div>
    <div class="reorder-indicator reorder-indicator-top reorder-indicator-active"></div>
  </div>
  <div class="reorder-item" style="padding: 1rem;">
    <div class="reorder-handle">
      <div class="reorder-handle-icon">
        <svg class="reorder-handle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
      </div>
    </div>
    <div class="reorder-item-content" style="padding: 0 0.5rem;">
      <div style="font-weight: 600; margin-bottom: 0.25rem;">ERPlora Warehouse D</div>
      <div style="font-size: 0.8125rem; opacity: 0.6;">Sevilla -- 1,120 items in stock</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- The cards variant adds margin-bottom, rounded corners, and elevated shadow to each item.
     Dragging state (.reorder-item-dragging) adds scale(1.02), z-100, and heavy shadow.
     Ghost state (.reorder-item-ghost) reduces opacity to 30%. -->
<div class="relative select-none">
  <div class="relative flex items-center bg-base-100 mb-2 rounded-box shadow-sm p-4">
    <div class="flex items-center justify-center w-11 h-11 cursor-grab text-base-content/30"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg></div>
    <div class="flex-1 min-w-0 px-2"><div class="font-semibold mb-1">ERPlora Warehouse A</div><div class="text-[0.8125rem] opacity-60">Barcelona -- 2,400 items</div></div>
  </div>
  <!-- Dragging item: z-100, scale-[1.02], shadow-[0_12px_32px_rgba(0,0,0,0.15)] -->
  <div class="relative flex items-center bg-base-100 mb-2 rounded-box p-4 z-100 scale-[1.02] opacity-90" style="box-shadow: 0 12px 32px rgba(0,0,0,0.15);">
    <div class="flex items-center justify-center w-11 h-11 cursor-grabbing text-base-content/30"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg></div>
    <div class="flex-1 min-w-0 px-2"><div class="font-semibold mb-1">ERPlora Warehouse B</div><div class="text-[0.8125rem] opacity-60">Madrid -- 1,850 items</div></div>
  </div>
  <!-- Ghost placeholder: opacity-30 -->
  <div class="relative flex items-center bg-base-100 mb-2 rounded-box shadow-sm p-4 opacity-30">
    <div class="flex items-center justify-center w-11 h-11 text-base-content/30"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg></div>
    <div class="flex-1 min-w-0 px-2"><div class="font-semibold mb-1">ERPlora Warehouse C</div><div class="text-[0.8125rem] opacity-60">Valencia -- 980 items</div></div>
    <!-- Drop indicator: h-0.5 bg-primary at top -->
    <div class="absolute left-0 right-0 top-[-1px] h-0.5 bg-primary scale-x-100"></div>
  </div>
</div>

Requires: tw.min.css

// Cards variant with drag states
const group = document.querySelector('.reorder-group-cards');
let dragging = null;

group.querySelectorAll('.reorder-handle').forEach(handle => {
  handle.addEventListener('pointerdown', (e) => {
    dragging = handle.closest('.reorder-item');
    dragging.classList.add('reorder-item-dragging');

    // Create ghost placeholder
    const ghost = dragging.cloneNode(true);
    ghost.classList.add('reorder-item-ghost');
    ghost.classList.remove('reorder-item-dragging');
    dragging.after(ghost);
  });
});

document.addEventListener('pointerup', () => {
  if (!dragging) return;
  dragging.classList.remove('reorder-item-dragging');
  group.querySelector('.reorder-item-ghost')?.remove();
  group.querySelectorAll('.reorder-indicator-active')
    .forEach(ind => ind.classList.remove('reorder-indicator-active'));
  dragging = null;
});

Horizontal Reorder

Preview

Drag to reorder ERPlora dashboard tabs

Sales

Products

Orders

Reports

<p style="font-size: 0.75rem; color: var(--color-base-content); opacity: 0.5; margin-bottom: 0.5rem;">Drag to reorder ERPlora dashboard tabs</p>
<div class="reorder-group reorder-group-horizontal reorder-group-editing">
  <div class="reorder-item" style="padding: 0.5rem 1rem; border-radius: 9999px; background: var(--color-primary); color: var(--color-primary-content);">
    <div class="reorder-handle" style="width: auto; height: auto; padding: 0; margin-right: 0.25rem;">
      <svg class="reorder-handle-icon" style="width: 14px; height: 14px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
    </div>
    <div class="reorder-item-content" style="font-size: 0.875rem; font-weight: 500;">Sales</div>
  </div>
  <div class="reorder-item" style="padding: 0.5rem 1rem; border-radius: 9999px; background: var(--color-base-200);">
    <div class="reorder-handle" style="width: auto; height: auto; padding: 0; margin-right: 0.25rem;">
      <svg class="reorder-handle-icon" style="width: 14px; height: 14px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
    </div>
    <div class="reorder-item-content" style="font-size: 0.875rem; font-weight: 500;">Products</div>
  </div>
  <div class="reorder-item" style="padding: 0.5rem 1rem; border-radius: 9999px; background: var(--color-base-200);">
    <div class="reorder-handle" style="width: auto; height: auto; padding: 0; margin-right: 0.25rem;">
      <svg class="reorder-handle-icon" style="width: 14px; height: 14px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
    </div>
    <div class="reorder-item-content" style="font-size: 0.875rem; font-weight: 500;">Orders</div>
  </div>
  <div class="reorder-item" style="padding: 0.5rem 1rem; border-radius: 9999px; background: var(--color-base-200);">
    <div class="reorder-handle" style="width: auto; height: auto; padding: 0; margin-right: 0.25rem;">
      <svg class="reorder-handle-icon" style="width: 14px; height: 14px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
    </div>
    <div class="reorder-item-content" style="font-size: 0.875rem; font-weight: 500;">Reports</div>
  </div>
</div>

Requires: ux.min.css

<p class="text-xs text-base-content/50 mb-2">Drag to reorder ERPlora dashboard tabs</p>
<div class="flex flex-wrap gap-2 select-none">
  <div class="flex items-center flex-none px-4 py-2 rounded-full bg-primary text-primary-content cursor-grab">
    <svg class="size-3.5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
    <span class="text-sm font-medium">Sales</span>
  </div>
  <div class="flex items-center flex-none px-4 py-2 rounded-full bg-base-200 cursor-grab">
    <svg class="size-3.5 mr-1 text-base-content/30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
    <span class="text-sm font-medium">Products</span>
  </div>
  <div class="flex items-center flex-none px-4 py-2 rounded-full bg-base-200 cursor-grab">
    <svg class="size-3.5 mr-1 text-base-content/30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
    <span class="text-sm font-medium">Orders</span>
  </div>
  <div class="flex items-center flex-none px-4 py-2 rounded-full bg-base-200 cursor-grab">
    <svg class="size-3.5 mr-1 text-base-content/30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
    <span class="text-sm font-medium">Reports</span>
  </div>
</div>

Requires: tw.min.css

// Horizontal reorder uses the same drag logic.
// The .reorder-group-horizontal class switches to flex layout.
// Drop indicators become vertical (2px wide) instead of horizontal.

Classes Reference

Class	Description
`.reorder-group`	Base container for reorderable list
`.reorder-group-editing`	Shows handles and delete buttons (iOS edit mode)
`.reorder-group-inset`	Inset card style with rounded corners and background
`.reorder-group-cards`	Each item rendered as a card with margin and shadow
`.reorder-group-horizontal`	Horizontal flex layout for tab-style reordering
`.reorder-group-disabled`	Disables all interaction (pointer-events: none)
`.reorder-item`	Individual reorderable item
`.reorder-item-dragging`	Active drag state (elevated, scaled up, z-100)
`.reorder-item-ghost`	Ghost placeholder left behind while dragging (opacity 30%)
`.reorder-item-disabled`	Disabled item (handle becomes non-interactive)
`.reorder-item-moving-up`	Animation for items shifting up
`.reorder-item-moving-down`	Animation for items shifting down
`.reorder-item-content`	Flex-1 content area of the item
`.reorder-handle`	Drag handle (44x44 grab cursor, touch-action: none)
`.reorder-handle-icon`	Icon container inside the handle
`.reorder-handle-lines`	Three-line grab indicator (hamburger style)
`.reorder-handle-line`	Individual line in the handle indicator
`.reorder-indicator`	Drop position indicator line (primary color)
`.reorder-indicator-top`	Indicator positioned at top of item
`.reorder-indicator-bottom`	Indicator positioned at bottom of item
`.reorder-indicator-active`	Shows the indicator (scaleX from 0 to 1)
`.reorder-delete`	Delete button (red, hidden by default, shown in edit mode)
`.reorder-delete-icon`	Icon inside the delete button