Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Drag to Sort Task List Block for Vue

A priority backlog you reorder by dragging a grip or pressing Move up and Move down, with a live numbered Order list beside it and the new position announced after every move.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people rank their own work, with this sortable to-do list block for Vue with Ark UI. Each row has a grip you drag with a pointer and two buttons, Move up and Move down, that work with a keyboard or a touch screen and stay put at the ends of the list. After a move, focus stays on the button you used, a ring fades where the row landed and a polite status line says where it went ("Moved 'Pay the invoice' to 2 of 7"). At the end of the frame a numbered Order list renumbers as you go, and is the text version of the order. Each task is a Checkbox, ticking one never moves it, and a Shine Button with an Input adds a task at the end. The frame and its split are ruled by Guides. On a phone the Order list drops under the backlog. For backlogs, priority lists and ranked queues.

FAQ

How does the drag work without a library?

Pressing a grip captures the pointer on the list. While you move, the row under the pointer is found with elementsFromPoint and the dragged task takes its place; releasing drops it. The grip is hidden from assistive technology because the Move buttons do the same job for keyboards and screen readers.

How do I reorder with the keyboard?

Tab to a row's Move up or Move down button and press Enter or Space. After the move focus stays on that task's button, so you can press it again to keep going. The button's name includes the task title.

What is the Order list for?

It shows the same order as a plain numbered list, so the result of a drag or a button press is readable at a glance and by a screen reader. It renumbers on every move.

What stays local, and how do I save for real?

The order is held in the page's state and returns to the starting order on reload. Send the new order to your server from move and from release (the end of a drag), and load the saved order into START.

Does dragging work on a touch screen?

Yes, the grip uses pointer events and touch-action: none, so a finger drag doesn't scroll the page. Touch users can still use the Move buttons.

All 100 todo list blocks