List drag-and-drop tutorial demo

This project is the demo and source code for the list drag-and-drop tutorial on my blog.

This tutorial explains the basic concepts of the HTML Drag and Drop API and shows how to implement it in a list, including a simple row-shifting mechanism.

The functionalities can definitely be extended, and improved.

More code has to be written for the following scenarios:

• Drag over at least another row, then drop outside of the list
• Drag over at least another row, then drag outside of the list, then drop at a non-adjacent row
• Drag outside of the list immediately, then drop inside the list, but over a child element

Live Demo

Live Demo Link

Tutorial Article

Tutorial Article Link

Author

👤 Akasha Rojee

• GitHub: @AkashaRojee
• Twitter: @AkashaRojee
• LinkedIn: Akasha Rojee

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!