Swipe

<div class="swipe-container" style="border:1px solid var(--color-base-200); border-radius:var(--radius-box);">
  <!-- Left actions (behind content) -->
  <div class="swipe-actions swipe-actions-start">
    <div class="swipe-action swipe-action-pin">
      <svg class="swipe-action-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>
    </div>
  </div>
  <!-- Right actions -->
  <div class="swipe-actions swipe-actions-end">
    <div class="swipe-action swipe-action-archive">Archive</div>
    <div class="swipe-action swipe-action-delete">Delete</div>
  </div>
  <!-- Visible content -->
  <div class="swipe-content" style="padding:1rem;">
    <div class="flex items-center gap-3">
      <div class="avatar avatar-sm avatar-placeholder">JD</div>
      <div>
        <div class="font-medium text-base-content">John Doe</div>
        <div class="text-sm text-base-content/60">Swipe left or right to reveal actions</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-hidden" style="border:1px solid var(--color-base-200); border-radius:var(--radius-box); touch-action:pan-y;">
  <!-- Left actions -->
  <div class="absolute top-0 bottom-0 left-0 flex items-stretch" style="transform:translateX(-100%);">
    <div class="flex items-center justify-center min-w-20 px-6 bg-primary text-white font-medium">Pin</div>
  </div>
  <!-- Right actions -->
  <div class="absolute top-0 bottom-0 right-0 flex items-stretch" style="transform:translateX(100%);">
    <div class="flex items-center justify-center min-w-20 px-6 bg-warning text-white font-medium">Archive</div>
    <div class="flex items-center justify-center min-w-20 px-6 bg-error text-white font-medium">Delete</div>
  </div>
  <!-- Content -->
  <div class="relative bg-base-100 p-4">
    <div class="flex items-center gap-3">
      <div class="size-8 rounded-full bg-primary text-primary-content flex items-center justify-center text-xs font-semibold">JD</div>
      <div>
        <div class="font-medium text-base-content">John Doe</div>
        <div class="text-sm text-base-content/60">Swipe left or right to reveal actions</div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Basic swipe handler:
// const content = el.querySelector('.swipe-content');
// let startX = 0;
// content.addEventListener('touchstart', (e) => {
//   startX = e.touches[0].clientX;
//   content.classList.add('swipe-content-swiping');
// });
// content.addEventListener('touchmove', (e) => {
//   const dx = e.touches[0].clientX - startX;
//   content.style.transform = `translateX(${dx}px)`;
// });
// content.addEventListener('touchend', () => {
//   content.classList.remove('swipe-content-swiping');
//   content.style.transform = '';
// });

<div class="flex items-center gap-2 p-3" style="border:1px solid var(--color-base-200); border-radius:var(--radius-field);">
  <div class="drag-handle">
    <svg class="drag-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>
  <span class="text-base-content">Draggable list item</span>
</div>

Requires: ux.min.css

<div class="flex items-center gap-2 p-3" style="border:1px solid var(--color-base-200); border-radius:var(--radius-field);">
  <div class="flex items-center justify-center p-4 text-base-content/30 cursor-grab" style="touch-action:none;">
    <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>
  <span class="text-base-content">Draggable list item</span>
</div>

Requires: tw.min.css

// Drag-and-drop with HTML5 API:
// handle.addEventListener('mousedown', () => {
//   item.setAttribute('draggable', 'true');
// });
// item.addEventListener('dragend', () => {
//   item.removeAttribute('draggable');
// });

<div class="flex flex-col gap-2">
  <div class="draggable p-3 rounded-field bg-base-100" style="border:1px solid var(--color-base-200);">
    Normal item
  </div>
  <div class="draggable draggable-dragging p-3 rounded-field bg-base-100" style="border:1px solid var(--color-base-200);">
    Dragging (elevated shadow, slightly transparent)
  </div>
  <div class="draggable draggable-over p-3 rounded-field" style="border:1px solid var(--color-base-200);">
    Drop target (tinted background)
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2">
  <div class="p-3 rounded-field bg-base-100" style="border:1px solid var(--color-base-200); user-select:none;">
    Normal item
  </div>
  <div class="p-3 rounded-field bg-base-100 opacity-80 z-[100]" style="border:1px solid var(--color-base-200); box-shadow:0 20px 60px rgba(0,0,0,0.15); user-select:none;">
    Dragging (elevated shadow, slightly transparent)
  </div>
  <div class="p-3 rounded-field" style="border:1px solid var(--color-base-200); background-color:color-mix(in oklch, var(--color-primary) 8%, transparent); user-select:none;">
    Drop target (tinted background)
  </div>
</div>

Requires: tw.min.css

// Toggle dragging state:
// item.classList.add('draggable-dragging');
// target.classList.add('draggable-over');