Accessible Drag-and-Drop

This example is written in Vue, but the principles can be applied to any framework.

View the code for this example.

View a blog post walk-through for this example.

To-do List

These are some items in a to-do list. You can drag and drop to reorder them to reflect what you want to complete first.

(The explanation above is important. It lets a screen reader user know what's in the list and that items can be reordered.)

Select a todo item, then press the spacebar to reorder.

  1. Buy milk

  2. Do the laundry

  3. Finish a book

  4. Pay the bills

  5. Wash the dishes