JavaScript Drag & Drop Sortable List Project

Yes, I know the order of people is not correct anymore 😅 This was made a while ago. Feel free to change the names/order

thank you for made this tutorial. i was doing it. but i have a problem, it cant be work in touch screen. can you help me how to make this also work in touchscreen??

how to delete drag?

Great video , really helping me understand how to implement the drag events as I am currently trying to implement this functionality to a get endpoint, so I can sort the response and push through the values/order to a Db. Any suggestions as the list I have will be dynamic depending on where clause?

thanks

I want to mobile drag drop in javascript how can i do?

perfect

How can we re-sort the list rather than swapping positions?

Hi...Can you plz show with kendo ui...how we can draggable dropdownlist option

We can use Fisher-Yates to shuffle the array. That will be quicker.

function shuffle(array) {
const arr = [...array];
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}

have a question. Why is appendChild(itemOne or itemTwo) not adding to the existing content of the .draggable class. That was the behaviour i was expecting. Did it just replace the existing content?

Why are you SWAPPING the elements around? I see that this is easily achieved but it's not really convient when you really want to order anything manually.
When would swapping be needed? When moving item 4 to position 1 your code puts item 1 to 4 instead of 2 .. when would you want this kind of functionality.

I don't get it.

Thank you for this, I've been tearing my hair out on some tutorials, this is the first one that worked for me!

as i have tested its not working with mobile device can you pleas help in that ?

what about saving the results so that when you refresh or load the page it remembers the new sort order?

This is by far the cleanest implementation of drag and drop I've ever seen 😍. Thanks for sharing this awesome technique, Brad🙂

How can I test the drag effects with my console window open? I can't see all the drag functions (I mean the console outputs to test to see dragover, dragenter, etc.) working in real time if I use chrome developer tool. With fire fox I can see the drag functions working, though. There should be a setup that I need to change in Chrome. so does anybody know about it?

How would you add a individual image to a name, say a photo of that person rather than the grab handles? I tried adding to the background using li:nth-of-type(1) and li:nth-of-type(2), etc adding one for each person. But obviously they do not drag when the li is moved. Any ideas?

should use grab cursor instead of pointer cursor for dragging (personally thought)

What's the best way to swap the cell you're using with ONLY the cell directly below it? Track the vertical (index) positions?

Thanks for a very interesting, informative, and instructional video. As always, the code logic is very well explained.

Thank you for this video! Saved me so many hours of trying to figure out how the drag and drop API works.

Your Tutorial is so amazing helpful for me, thank you so much...^^

hey dude, what is ur family font from vsc ?

Thx so much!

De-mystifying drag excellent

Thanks Brad! Your easy to follow solution helped me out a ton for a project that I am working on right now

Elon Musk is crying as we speak

I really enjoyed this one. Looking at how to extend the functionality

Can someone tell me what i need to know to get my first job as a Junior Front Dev? I know how to do basic stuff like creating simple games in Canvas, ToDoLists, Animated Navbars and i m right now trying to learn Async Await, where is the point when i will be good enough to apply for jobs, i just hate doing things when i don't know when there is that minimal cap.

Very nice tutorial, thank you! I've built a little game from it and than realized that is doesn't work on touch-screens. Found some blog-posts how to identify touch screens and gonna try to fix it and load the appropriate event listeners . Just thought I leave that comment here .. mobile drag & drop could be worth an other tutorial.

Thank you Sir !
i'm just a little bit confused about how any changes occurs on the indexes of "list items" array, has to happen on "draggable list div" too, despite that there is no link between them.
to precise i'm talking about how swapping items on "list items array" affect the "draggable list div" despite that i don't see any relation between them ?
Thank you in advance !

Seeing classes that focus on the basics makes me happy, too many times there are multiple additional languages/systems that get slipped in right away which can be confusing.

can anyone explain how that sort worked??

too hard for me :D

Hi!!
Would it be possible to "fix" the count of dragStart( ) event to 1 while been selected?
My english isn´t that good, im sorry. I´m from Brazil, learning a lot from you, thanks!!!

Nice🤗

Nice

Nice

Hey Brad can you try this in angular

I wonder what browser are you using? It looks really nice!

An easier way to shuffle a list is to deduct 0.5 from Math.random() in the sort function.

Example: [1, 3, 110, 40, 302].sort( ()=> Math.random() - 0.5 )

- Math.random() generates random numbers between 0 and 1.
- Deducting it with 0.5 can either generate a + number or a - number.
- Passing the equation through the sort function will randomly place each item in front of or after the previous item, depending on the + or - value generated.

Therefore, you can refactor your code without both the .map() functions under createList() with this.
function createList(){
[...richestPeople]
.sort(() => Math.random() - 0.5)
.forEach( ... )
}

Brad Can you do a trello clone using react js

How to make the welcome page in new tab like yours ?

Much love from Jamaica.