Explore practical examples of how draggable works in action.
The basic building block of the library.
This example demonstrates the core draggable functionality using a simple toggle switch.
The switch uses the drag:move event to track the handle's position and updates its state
based on whether it's dragged past the halfway point. The handle's position is constrained
to the x-axis, and smooth animations are applied using CSS transitions. When dragged past
50% of the container width, the switch updates to 'on' state, changing both the handle
position and color.
Dropzones are intended to hold only one Droppable child. This example demonstrates
controlled dropping with validation.
Each draggable item has a specific dropzone identifier (1-4) and can only be dropped into a matching zone.
The system validates drops using data-dropzone attributes and prevents invalid drops. Empty dropzones are
styled and provide visual feedback when a valid item hovers over them. The draggable-dropzone--occupied class
is used to track filled zones and prevent multiple drops in the same location.
Sort elements in a single collection, maintaining order for all but the element being dragged.
This implementation features a vertical list with drag handles and locked items. Items can be
reordered by dragging the handle (≡) icon, while one item is intentionally disabled with
a lock icon (🔒) to demonstrate mixed interactive states. The sortable functionality
automatically animates other items to make space for the dragged element and updates the
list order when items are dropped. Disabled items maintain their position and provide visual
feedback of their locked state.
A 3x3 grid demonstrating direct element swapping functionality.
When dragging an item, you can drop it onto another
to trigger a swap animation.
This example uses CSS grid for consistent spacing and transitions for
smooth animations. The distinct colors help users track item movement and
provide immediate visual feedback during interactions. Hover effects and drop
shadows enhance the interactive experience by indicating which items are being manipulated.