Drag and Drop Sortable List in HTML CSs & JavaScript | Draggable List in JavaScript

In this video tutorial, I'll guide you through the steps to create a Drag and Drop Sortable List using HTML, CSS, and JavaScript. The Sortable List is a useful feature that allows users to drag and reorder items to their desired positions.

Download Images of this Project

Download Codes From Here

Follow me on Instagram

#javascript #html #css #javascriptprojects #js #javascriptgame

Music Credit:
Ikson - Anywhere [Official]

Ikson - We Are Free [Official]

Miss You – LiQWYD

[NicoHeinrich]

Adding the dragging class after a delay is sooo sneaky. Thanks for sharing!

[ahabwolf]

I tried this a bit, but ultimately could not get it to correctly position the dragged item where I wanted to drop it in the list. I think it's silly to do the positional calculation when you know you are working with a list of elements like this. You can simply switch your dragover listener to each list item instead of the parent list element (the <ul> in this case), and then just do a few if statements in your listener to check where the current event target (the item you are hovering over) sits in the list in relation to the item you are dragging. That information tells you which direction in the list the item is being dragged, at which point you know if you should be inserting it before or after the item you are over. I believe this also stops the listener from firing hundreds of times while you are dragging? All the rest of this is pretty great though, thanks!

[qvjmrvl]

Hello Friend. You are truly the best. You managed to silently teach me what others could not through conversation. You are a very good teacher. I saw a lot of people, they are not the same. But here's what I wanted to say. Nobody programs in regular JS anymore. Maybe you will start teaching new technologies, not very difficult, for example VUE JS (cdn is required, since installing packages scares a lot of people, me too). What do you think?

[amanpreetsingh]

Thank you for making this video. I was searching through the youtube to make grag and drop list only using html and js but wasn't able to find it all were based on react. Your channel have helped me a lot. Thank you <3

[aadhilahamed]

I find a correct solution, but couldn't. Finally, I reach your video and I learned the way how it works. Thank you!!!

[Arjun_chaurasiya]

Bro can you create a password protected page for blogger.

[ashishpatel]

Always waiting for your javascript videos .
Love from india ♥️♥️

[guerreradelaluz]

Thank you very much for that tuto wonderful!
I only have a problem that I can't solve... when I scroll on the page and I try then to order the list, there is a bug.
It doesn't work well and do whatever... :(
If someone has a solution. Thx lot.

[odunladeoluwaseun]

What is the best way to store this in a DB?

[maskman]

Pretty cool, you are so creative and productive, good job 👍👍👍

[lucabicego]

Thank you for you video. Every thing works well except when i will use a scrollable list. In this case the Drag & Drop doesn't work. Can you give me a suggestion on how to manage this situation ? Thanks.

[hcjlhnv]

thanks for the tutorial ❤, you could try to turn down the music a little bit, it gives headache after 5 min straight😥😥

[Trachodil]

Hi, how to me get sortable list, so that it can be stored in db. Thanks.

[无名氏-vs]

What should I do if there is a scroll bar? Can you write an example to support scroll bars?

[officialhawardtv]

What i have been waiting for...thanks...kindly tell me on which android application can run php without any disturbance

[HKbiketravellers]

Thank you for your video. If the browser length is shorter than the white area, the drag and drop will be shifted by a number of hidden option(s); which makes the codes cannot be used for too many options.

[padamgadshila]

Which screen recorder you use and how do u get blue circle when you click the mouse

[omarsagr]

Thank you for this video.. but it doesn't work on iPhone.. do you have a solution?

[SasiKumar-beyq]

I have one doubt any plz clarify.In which type of project we can use this Design.. where gonna we use this design on website example plz

[reviewhunter]

How to create search bar like google?
When we click on search bar it comes in full page view and when we click on back button of my phone it is in normal again.