Sortable List

Drag-and-drop list with LiveView reordering, smooth hover states, and instant persistence.

Basic Sortable List

Grab the handle on the right to reorder feature requests. LiveView receives the new order and updates the data model.

Prioritized roadmap

Reorder launch milestones and share with leadership.
Segment handoff

Drag customers into success pods for automated rituals.
Design QA checklist

Guarantee every ship hits the visual + UX spec.
Founder update queue

Keep exec updates crisp with drag-and-drop talking points.

Current order

1 Prioritized roadmap
2 Segment handoff
3 Design QA checklist
4 Founder update queue


          <.sortable_list id="todo-list" items={@todos}>
            <:item :let={todo}>
              <div class="flex items-center justify-between rounded-lg border border-transparent bg-white px-4 py-3 shadow-sm hover:border-blue-200 hover:bg-blue-50">
                <p class="font-semibold text-slate-900"><%= todo.title %></p>
                <.icon name="hero-bars-3" class="h-4 w-4 text-slate-400" />
              </div>
            </:item>
          </.sortable_list>

Props

Prop	Type	Default	Description
id	string	-	Unique ID for the sortable list
items	list	-	Collection of items to render and reorder
item_id	atom	:id	Key used to identify each item for drag & drop