tinloof / drag-and-drop-article

How to make and test your own React drag and drop list with 0 dependencies

This is the source code for the drag and drop sortable list in this article.

Scripts

Start the application:

npm start

Run cypress tests:

npm run cypress:run

drag-and-drop-article's Issues

reordering logic: dragOver vs dragEnd

It's not clear why reordering happens during dragOver instead of dragEnd.

Dragging causes the cursor to change

The cursor changes to 'not-allowed' 🚫 when dragging through the list.
Potential solution in #9: Using e.preventDefault() in onDragOver and the <ul> parent keeps a meaningful cursor while inside the list