Draggable List

Cards 46

About

A reorderable list component with drag and drop functionality.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Draggable List to your project and fits it to your theme.

Code

How Draggable List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DraggableList,DraggableItem } from "@/components/ui/draggable-list"
import { useState } from "react";

const Demo = () => {
  const [items, setItems] = useState([
    { id: "1", content: <DraggableItem>First Item</DraggableItem> },
    { id: "2", content: <DraggableItem>Second Item</DraggableItem> },
    { id: "3", content: <DraggableItem>Third Item</DraggableItem> },
  ]);
 
  const handleReorder = (newItems: DraggableItemProps[]) => {
    setItems(newItems);
    // Do something with the new order
  };
 
  return (
    <DraggableList
      items={items}
      onChange={handleReorder}
      className="max-w-sm w-full"
    />
  );
}

export {Demo}