shadcn-drag-and-drop-sort

Dynamic Pill Sorting: Drag & Drop with Dnd-Kit and Shadcn/UI

Explore this implementation of a drag-and-drop sortable list for pills of varying widths. Built with dnd-kit for robust drag-and-drop logic and sortable capabilities, and styled using Shadcn/UI components. This example demonstrates how to calculate pill widths dynamically based on content and provides a visual line indicator for precise drop placement, offering a user-friendly sorting experience for developers integrating such features into their applications.

Features:

• Core Drag-and-Drop: Leverages @dnd-kit/core for fundamental drag and drop interactions.
• Sortable Functionality: Employs @dnd-kit/sortable to enable reordering of pills within the container.
• Dynamic Pill Widths: Calculates pill widths automatically based on their text content and padding, accommodating elements of any size.
• Line Drop Indicator: Features a visual line to clearly indicate the precise drop position during sorting.
• Shadcn/UI Integration: Utilizes Shadcn/UI for the visual styling of pills and the container, ensuring a modern look and feel.
• Responsive Reordering: Pills can be dragged and dropped into any position within the designated container.
• HTML5 DnD Comparison: The demo provides a side-by-side example with native HTML5 drag and drop for reference.

Summary:

This project serves as a practical demonstration of how to create a sophisticated drag-and-drop interface for sorting pills or similar UI elements with varying widths. By combining the power of dnd-kit for interaction logic and Shadcn/UI for aesthetics, developers can implement intuitive and visually appealing sortable lists. The inclusion of a line drop indicator and dynamic width calculation enhances the user experience for managing ordered collections of items.