Build Drag & Drop Sortable List With Vanilla JavaScript

This quick tutorial on how to create a *drag and drop sortable list* with HTML and JavaScript. We won't be using any 3rd party libraries rather we'll build this Drag and Drop Sortable List feature with vanilla JavaScript.

Subscribe my channel for more helpful videos:

This 🎬 video is part of Playlist:

🌎 Browser : Brave V.1.40 (Chrome V.103.0)
📝 Code Editor : VS Code
💠 Extensions : Live-server

#draganddrop #javascriptprojects

[JdingleVrr]

Do you think it would be possible to show a tutorial on how to adjust the drop effect so that the space between the elements is highlights as you drag over it? This way you are not effectively dropping the dragged element on one of the fixed elements in the list and assuming it's position position but rather carefully placing the element in a position between two fo the fixed elements. Would love to see that!

[longminhdone]

Is there any way to trigger dragging only we drag the handler not entire row?

[MrBrady]

Fun, but the UI is a little buggy on smaller screens. Specifically, the green background doesn't work as well as it does on the larger screen size. Also I changed the H1 to a P element for the icon. Other than that, it's a nice mini project, thanks.

[JdingleVrr]

Awesome vid! Very easy to follow. Was just wondering if you could explain the logic behind why setting li.style.display = 'flex' allows it to enter back into the list insted of vanishing? I can't quite work out what it's doing there when the flex of the li is horizontal and affecting only it's inner components. Love the vids!

[rishikasharma]

Hey i have some queries related to javascript. Can you please guide me?

[marvinhernandez]

nice video, by the way im self taught web developer and still learning javascript and how it works can you suggest a fastest way to master it cause im confused

[ops_tesseract]

Can't understand your words. And you made the project over-complex. Waste of my 20 mins