Hi! My name is Irina Bolotskikh, I am writing on behalf of Practicum by Yandex, Russia’s #1 practice-oriented and job-landing bootcamp. Designed by one of Europe's top tech companies, Practicum by Yandex offers guided courses in web development, data analytics, data science and UX/UI design. Each profession includes 24/7 support from our tutors and a free 20-hour intro course. We are very proud of our graduates who have already achieved so much (you can read their stories on Switchup and Course Report) and we would love your subscribers to learn more about it. Could you please suggest options for sponsored content at your channel?
I just landed my first junior dev job today Brad! And your content has been a huge part of my learning. After I bought the javascript course I kept coming back to your videos and I still do. I thank you from the bottom of my heart and I hope you and your family are doing well.
This is great, love how you step through things piece by piece. I always had to depend on a 3rd party script to do nested sortable items, but I love knowing the core base to do them myself.
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.
Thanks for your videos. I have just purchased Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript course from Udemy. I will try to learn them all then come back to complete all your projects on RUclips.
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; }
Really thanks for every tutorial you've been sharing with us! Every new content I either learn something new or review what I've learned. Your knowledge and skills about Front-end development are unique. Thanks again ;)
Hi Brad, thanks for new awesome video! Anyway I have a question. Why do you copying richestPeople array, even "sort" method is mutable it does not affect original array because it is called on new array of objects created by the "map" method?
Wow, this is truly an awesome tutorial. Learnt a few things about javascript that I didn't know! Let me ask a quick question if it's possible, how did you learn your ninja css skills? I'm sure there's an element of experience, but would you recommend any resources?
Brad to the rescue! I have found great value in this tutorial. This is off the topic here...But I am wondering if you would ever do a tutorial on recursion in javascript. I have really struggled to get a hang of it.
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 !
The list items array holds pointers to the list items that are children of the draggable list div. Thus, when the list items have their children swapped it will be reflected in the div. The list items 'themselves' aren't swapped.
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?
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!!!
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( ... ) }
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?
The function gives you access to the current element and the next element. a and b. if you want the current element to stay in the current position (a), return -1, else return 1 and a will be moved the the next index. So by subtracting b from a you eighter get a negative or a positive number. In this case, if a is less then b, then you'll get a negative number, and only then would a keep its current position. But you could choose any kind of critaria for sorting, the clue is to return eighter a negative number or a positive one.
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.
I am confused. When the swapping items comes at around 40-45mins mark. He appendChild. In other words, adding an element. However, nothing is ever removed (unless I missed it at an earlier time). Why are they being swapped and not more children being appended over time? Does it have to do with the list[index] replacing one for the other? I didn't see any removeChild.
That's because one element (as javascript variable) cannot be in two places in one time. Try creating 2 divs, and create some other element like header in javascript code (assign it to a variable). Then append it to the first div in the first line (it's gonna be inside the first div). And then change the code, and add another line of code, where you append it to the second div (now it will disappear from the first div and be in the second div)
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??
I implemented something similar to this and also added swap, add and delete functionality along with drag and drop. Have a look and lemme know if you liked it. ruclips.net/video/AAmx-WWKCKM/видео.html
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?
Today, I am doing a task with pspdfkit, the client require me to drag and drop pages in the thumbnail to change the order of pages in pdf files. Suddently I seen this video!!!
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?
@brad a question: i got very limited knoledge about back end and its not really what drives me. im know very good my ways around javascript and DOM manipulation, html, css, and consider myself gsap animations wizard,and im currently learning webgl,i can recreate any interface from wwwawards so i have this friend that work for 20 years doing sotware using oracle azure but with very limited experience on front end, we trying to make a start up /web agency and what is holding us i feel is to find a way to marry the 2 sides to produce any software,website or webapp we need, so the question: if you were in my position what would you spend your time learning? SQL?react/next js or something else? thanks for the content , sorry for the english its because im so desperate for an insigh on this that i asked the same question to multiple dev related youtubers i respect, thanks for the content ,its super helpfull as aways
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.
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.
Yes, I know the order of people is not correct anymore 😅 This was made a while ago. Feel free to change the names/order
I could tell! You were using semi-colons😅
How to make plugin like codemirror?? Plz make a tutorial on it🥰🥰🥰
you forgot elon musk
Hi!
My name is Irina Bolotskikh, I am writing on behalf of Practicum by Yandex, Russia’s #1 practice-oriented and job-landing bootcamp. Designed by one of Europe's top tech companies, Practicum by Yandex offers guided courses in web development, data analytics, data science and UX/UI design. Each profession includes 24/7 support from our tutors and a free 20-hour intro course.
We are very proud of our graduates who have already achieved so much (you can read their stories on Switchup and Course Report) and we would love your subscribers to learn more about it. Could you please suggest options for sponsored content at your channel?
@@Gameplay-fh1iv Many tutorials are still using it.
I just landed my first junior dev job today Brad! And your content has been a huge part of my learning. After I bought the javascript course I kept coming back to your videos and I still do. I thank you from the bottom of my heart and I hope you and your family are doing well.
wow, congratulations classmate, haha
Yo happy for you pray to God to do mine.
Amazed!!! I was just practicing exactly like this project yesterday and now its explanation is on YT!
Great work Sir Brad!!!
I really appreciate you sharing your knowledge and teaching skills with us
You're right 🤟
Sir I am first I am connected this youtube for years I am from somalia 🇸🇴 thanks brad
This is by far the cleanest implementation of drag and drop I've ever seen 😍. Thanks for sharing this awesome technique, Brad🙂
thanks sir brad , I still follow your tutorials from the begin to the end , and i have real bad english you're just awesome
This is great, love how you step through things piece by piece. I always had to depend on a 3rd party script to do nested sortable items, but I love knowing the core base to do them myself.
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.
The most useful thing in this video that I've learned is apply style all items in list except last item. Thanks a lot.
Thanks for your videos. I have just purchased Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript course from Udemy. I will try to learn them all then come back to complete all your projects on RUclips.
Thank you for this video! Saved me so many hours of trying to figure out how the drag and drop API works.
Thanks Brad. The best ever
Thank you for this, I've been tearing my hair out on some tutorials, this is the first one that worked for me!
This was just what I was looking for! Thank you for sharing this.
Elon Musk rn: Depression, Sadness, Loneliness
Happy teachers day sir ❤
As always, Nice video Brad :))
Thanks Brad! Your easy to follow solution helped me out a ton for a project that I am working on right now
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;
}
Really thanks for every tutorial you've been sharing with us! Every new content I either learn something new or review what I've learned. Your knowledge and skills about Front-end development are unique. Thanks again ;)
Hi Brad, thanks for new awesome video!
Anyway I have a question. Why do you copying richestPeople array, even "sort" method is mutable it does not affect original array because it is called on new array of objects created by the "map" method?
I would have liked to know why we have to prevent the 'drag-over' default behavior.
Today I was thinking of drag and drop featured project. Thanks a lot.
Thank you, Brad.
You're awesome. Keep creating great stuff!
Wow, this is truly an awesome tutorial. Learnt a few things about javascript that I didn't know! Let me ask a quick question if it's possible, how did you learn your ninja css skills? I'm sure there's an element of experience, but would you recommend any resources?
Brad to the rescue! I have found great value in this tutorial.
This is off the topic here...But I am wondering if you would ever do a tutorial on recursion in javascript. I have really struggled to get a hang of it.
Brad we love you man, you a hero for us
Congratulations to your birthday Brad!
I really enjoyed this one. Looking at how to extend the functionality
I wonder what browser are you using? It looks really nice!
Thanks Brad !! Really Appreciate it , Keep up the hard Work !! I was wondering if u could make a Symfony Course in Details !!
Very creative appoach to randomising list items with the two maps!
Thanks for a very interesting, informative, and instructional video. As always, the code logic is very well explained.
Thx Brand you’re the beat 🤝🤝
What's the best way to swap the cell you're using with ONLY the cell directly below it? Track the vertical (index) positions?
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 !
The list items array holds pointers to the list items that are children of the draggable list div. Thus, when the list items have their children swapped it will be reflected in the div. The list items 'themselves' aren't swapped.
Yes i'm also still very confused how does this work
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?
Brad Brad.. I'm lucky to have you in my lifetime
Nice Video. Really helpful for people wanting to learn JavaScript
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!!!
Much love from Jamaica.
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( ... )
}
Will be nice if you can make a nested sorted list that will be nice .
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?
Regarding the sort function for numeric elements into an array, why the function that returns a - b, into the sort argument, makes the job done?
The function gives you access to the current element and the next element. a and b. if you want the current element to stay in the current position (a), return -1, else return 1 and a will be moved the the next index. So by subtracting b from a you eighter get a negative or a positive number. In this case, if a is less then b, then you'll get a negative number, and only then would a keep its current position. But you could choose any kind of critaria for sorting, the clue is to return eighter a negative number or a positive one.
Exactly what I was looking for, that's so much
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.
I am confused. When the swapping items comes at around 40-45mins mark. He appendChild. In other words, adding an element. However, nothing is ever removed (unless I missed it at an earlier time). Why are they being swapped and not more children being appended over time? Does it have to do with the list[index] replacing one for the other? I didn't see any removeChild.
i think that because with "querySelector" method. all changes made by reference
That's because one element (as javascript variable) cannot be in two places in one time.
Try creating 2 divs, and create some other element like header in javascript code (assign it to a variable). Then append it to the first div in the first line (it's gonna be inside the first div). And then change the code, and add another line of code, where you append it to the second div (now it will disappear from the first div and be in the second div)
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??
Hey Brad, wondering if you can do a video on Angular unit testing ? Couldn’t find anything nice on the internet. Thanks!
Your Tutorial is so amazing helpful for me, thank you so much...^^
I implemented something similar to this and also added swap, add and delete functionality along with drag and drop. Have a look and lemme know if you liked it.
ruclips.net/video/AAmx-WWKCKM/видео.html
Hi...Can you plz show with kendo ui...how we can draggable dropdownlist option
Thanks, how could you drag multiple?
should use grab cursor instead of pointer cursor for dragging (personally thought)
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?
what about saving the results so that when you refresh or load the page it remembers the new sort order?
Thank you for always providing us a great learning project like this. Your videos make me motivated.
Can someone explain the 42:42 - 43:11 line? I know what that line does, but I am not sure how it works.
Today, I am doing a task with pspdfkit, the client require me to drag and drop pages in the thumbnail to change the order of pages in pdf files. Suddently I seen this video!!!
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?
as i have tested its not working with mobile device can you pleas help in that ?
44:53 I don't understand how can you use DOM Element Object methods like appendChild on a JavaScript array and it reflects on the DOM?
by using array, that specific element is grabbed,
use console.log , u will understand what he is doing
can anyone explain how that sort worked??
Thanks! Any thoughts on how to make this work on mobile? The dragging doesn't seem to work for me so far.
@brad a question: i got very limited knoledge about back end and its not really what drives me. im know very good my ways around javascript and DOM manipulation, html, css, and consider myself gsap animations wizard,and im currently learning webgl,i can recreate any interface from wwwawards so i have this friend that work for 20 years doing sotware using oracle azure but with very limited experience on front end, we trying to make a start up /web agency and what is holding us i feel is to find a way to marry the 2 sides to produce any software,website or webapp we need, so the question: if you were in my position what would you spend your time learning? SQL?react/next js or something else? thanks for the content , sorry for the english its because im so desperate for an insigh on this that i asked the same question to multiple dev related youtubers i respect, thanks for the content ,its super helpfull as aways
How to make the welcome page in new tab like yours ?
How can we re-sort the list rather than swapping positions?
Really Amazing, Thanks
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.
Hey, Brad please make a video on audio pitch detection and processing on web (cross-platform, if possible)... Will be very helpful
I want to mobile drag drop in javascript how can i do?
First🔥❤️
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.
Hi bro, hope you are doing well ☺️
De-mystifying drag excellent
How if you drag with more pages on the list? Any ideas?
Ofc no answer to this.
Thanks very useful!!
Hi! Can you give me a FYP idea for the android app
you are the best, thanks
Brad Can you do a trello clone using react js
I built drag and drop functionality in pure JS. I didn't do the sortable components though... :/
Awesome video Brad! Any chances for a mobX react tutorial ? Cheers.
Thanks Brad
how to delete drag?
Thx so much!
Who are those developer who watch travesy toturial and download as well
thanks
Tank you Brad!
Super 😎
good👍🏽
do this in react as well please!
It'd be a nightmare.
Nice
good
awesome
too hard for me :D
Nice🤗
There is that meme lord ?
First
Hey Brad can you try this in angular