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.
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.
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.
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?
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 RU-vid.
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?
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; }
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.
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 ;)
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?
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!!!
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.
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( ... ) }
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.
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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AAmx-WWKCKM.html
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??
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!!!
@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 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?
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.
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?
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.