Create a sortable list where people drag items by a grip handle. It works with a mouse, on touch screens and with the keyboard, and it tells you the new order when something moves.
Try it in the preview: drag the grip, or focus a grip with Tab and press the up and down arrow keys.
Runs entirely in your browser. Nothing is uploaded to any server.
Pointer events handle mouse, pen and touch with one code path.
Arrow keys move items, with screen reader announcements.
Under 80 lines of plain JavaScript.
The native HTML drag and drop API does not work on most touch screens and gives little control over the dragged item. This component uses pointer events instead: the handle captures the pointer, and as it moves the item is inserted before the first sibling whose middle is below the pointer.
Only the handle starts a drag, so text inside items can still be selected and links still work. touch-action: none on the handle stops the page from scrolling while you drag on a phone.
Each move is announced, for example "moved to position 2 of 5".
Position numbers update automatically after every move.
event.detail holds the item texts in their new order.
Yes. Pointer events cover touch, and the handle disables scrolling only while you drag it.
Listen for the reorder event on the list. Its detail is an array of item texts, or you can read data attributes from the items.
Yes. Tab to a handle and press the up or down arrow key. Focus stays on the handle so you can keep moving the item.
Only the handle starts a drag. This avoids accidental moves and keeps text selection and links working.
Auto-scrolling is not included. For very long lists, keep the list in a scrollable area or add auto-scroll in the pointermove handler.
More free tools from My Panda Toolbox.