Drag and Drop Using Native Javascript 01

hey what's going on guys how all you are doing welcome to a new video tutor from IP today we're going to go ahead and go di into the drag and drop system so we're just going to implement a native JavaScript drag and drop system with no libraries no jQuery nothing like that just going to start it from scratch and try to implement something really really good so here's I'm using I'm going to use for this for this or for the sake of this video tutori going to use codepen.io for just the sake of Simplicity and to make it just faster and to just it can do the job for us you can use any code editor any I don't know like Visual Studio code to develop that but I'm just going to use code Ben making it simple uh like very simple so here's like the demo what we're going to achieve on this particular video tutorial so here's like the to- do items container so it like it holds the to-do items and whenever you Tak that as you can see you can drag it whenever you click it and the color change the background color change whenever you are holding that to the item and you can move it around and whenever you want to like put it in into the to-do container you get this highlight into the to-do container so this highlight this border thing which shows you where you are going to put these to-do items so it's pretty good as you can see here you can just drag it over all of the to-do container and just going to give you like an overview or a preview where you're going to put this toio item and whenever you're release that you're just going to snap right into the right position so takes this release it snaps into the right position so just going to go ahead and dive you can have like multiple to-do items in here from this container just take it and drag it and drop it on this to do container so just going to go step by step on how we can implement this the dragon drop and everything all the system just going to start working on it from the code so here we're going to start from scratch here I have like an empty JavaScript code going to start from the beginning and here's like the our HTML structure all it does we have like a container that holds all it's the main container under that container we have two main containers so the items container which is this one which holds the to-do items the second one which is the to-dos container which has the highlighting thing and which represent our to-dos items container so each one of these we have just header to shows the items and the to-do header and the second one we have the to-do item which is this particular item which we can actually going to be the target our Target where we can like drag and drop and place it into into end the to-dos container so here we're going to start I have like a predefined CSS style so you can find this in my uh like my website and do this particular tutorials uh like the written tutorial so just go ahead and do the description you going to find the link and you can just go ahead and grab this code or the style if you're really intending to use my style in here for for your uh dragon drop system but you can use your own it doesn't really matter much but here we can you can use the same thing so we have like a couple of things predefined like container base container and a lot of things so here we're just going to start by the JavaScript code so what we need is to reference these two containers the items container and the two containers so if you can take a look into the HTML structure so we can take and reference them so here we can use the items container which equals uh the document so document. get Elements by since we are using the ID in here which is items container so I'm just going to say Elements by ID I'm just going to say items container the second one we're going to like reference is the to-do container so just going to say to-do container and going to equals to the document again document don't get element by ID uh you can get the element by class but since they have or this since they share the same class name uh this is not really good to use class for that so here we have referencing them since we're going to need them that much also we need to use the to-do item or reference it uh but before that what we need is let's say that we're going to have like a to-do it here in this case in this particular one we have only one too item let's say we have like multiple to-do items and what we need is to just go ahead and drag or like hover and just put and drag and drop any item on this list so we are not going to support all only one item we need to support multiple items so for that we're going to need a loop and this Loop is just going to go ahead and loop through all the items just going to reference in here which has the to-do item class so let's just go ahead and reference that just going to be like the to-do item and I'm just going to say documents uh get Elements by the class name so since they share this CL the same class name over there as you can see in here so if you can take a look and the class name we have the to do item class name and if we have like multiple like to-do items in here diff containers they're going to share the same class name which means this function is going to return us an HTML collection so in HTML collection we can Loop through it and we can access each item differently or separately so we can do that and a for Loop and this should this should probably be to the items since we're going to like reference multiple items at once and here we're just going to need the four Loops so let's I equal zero I less than to do items. length and we're going to have i++ and I'm just going to look through each one of these so here we have got the loop we can now reference the one single item so let me just collapse all that so we can uh freely see my code and this very important thing so here we can reference that from this like take this like an array so you can reference in simply as an array normal array and here we've got one single item so what we need in the Jing Jin normally is we need to check for three major events so three important ones the first one is the click so whenever we click that we register this event or we check for this event the second one is the click and the draging or the click and the moving mouse moving so this event also is very important the last one is the drop which we just the mouse button or the left Mouse button up so we check for this three uh like major events so let's just go ahead and use that so we can register the event under the items so in here so this one item or this to do item we need to register the event under that so we can use the add event listener so here we can add an event and we're going to use the mouse down event so Mouse down events in here uh we can we can set which events in here you can use Mouse down Mouse move Mouse up y y and the second one is going to take the Callback so the Callback we're going to like create separate functions for this so let me just go ahead and create this on Mouse down and the first one is going to take the uh JavaScript events the second one is going to take our item in there and just going to use that and all of that so this like the three functions that we need on Mouse down on Mouse move and on Mouse up they uh three of them takes the uh the same parameters the events and the item that we are currently moving and here we just add the uster so on Mouse down we just run the on Mouse down and pass in the event in the item uh the same for the other ones Mouse move and mouse up we just call the function and we are good to go so just made this very very quickly for the sake of the video tutorial so you should already know how to do things like this in very basic way so now what we need is on the on Mouse down we need to trigger some uh Boolean so let's just go ahead and create this Boolean uh also I've created this mouse offset going to need it in here so to offset the actual position so the moving is going to be like POS so almost down um is going to equal to false so here it's going to equal to false in here whenever like we are holding the actual Mouse Down Under The Elements you are currently trying to move is just going to equal to True also if you have remember the effects that when we click that we get this really nice effect of the background we just the background changes so make it a little bit looks a little bit user friendly so for that we can go ahead and grab I have like a piece of code in here uh let me just grab it in there and here we're just going to change the background color to this color so we just going to make it little a little bit better now for like holding or keeping track of the offset what do you mean by the offset is whenever we click that whatever the mouse cursor is we're just going to register the mouse cursor position so we can hold it and we can later on whenever we need to move our item around the page is we can use this item offset so here we can use or we can say mouse offset equals new object the x is going to equal to item do offset left so we can get the offset left and we can minus it from the e client X and E client X represent the actual client cursor position or Mouse position uh the X position pretty much and then second one is going to be like the Y item do uh offset uh top and just going to be like the minus e. clients Y and we are good to go now this should do the job perfectly for us also what we need into the mouse up is as you can see here whenever I click that I don't get the uh on Mouse up I don't get the like the original background reverted back into the to itm so I need to do that I need to revert the original background so for that I have this end the style so you can just go into the too item I can grab this hex decimal value and I can go in here and say item do style background uh color equals this one and we are good to go now here is the main part which is going to be like the mouse moving now we need to move the mouse around the page so we click we drag and then we drop so for the mouse moving what we need is to make this item follow the cursor which is set this item position into the cursor or the mouse cursor position so for that first we need to check if the actual Mouse is holding the actual items so that's why we have declared the mouse down uh variable so that going to keep track of this so here we go I'm I'm spelling this wrong so it is mouse down so if it's moused down now we can move things up also we need to use the e. prevent default this will prevent the default behavior of the uh the currently clickable uh elements in here we are clicking this one so just going to prevent the default Behavior whatever this going to be like a link or something just going to prevent anything any awkward option you don't really expect so just going to prevent this so make sure to you always use this whenever you try to handle some clickable elements now here under the mouse Dev what we need to do is style and we say the left so this is how you change the actual position of an element and also make sure to set the style of this or the position into the elements um style to from Chang it from relative to the obsolute so you can uh like actually change change the actual left and top which represent the left represent the X position of the element and the top represent the Y position of the element so make sure to trigger that and here what we can say is e do clientx plus the mouse offsetx and here we are just setting that also we need to use our plus pixels why we plus pixels because this returns a number this returns a number and this takes a string instead of number also this takes a string plus uh pixels or centimet or whatever like that so we're just going to plus that and concatenating a string with a number just going to return a new string so just going to assign a new string there also need to take care of the top position so we can say e do client y+ M offsety plus pixels and we are pretty much good to go so this will reference the actual Mouse y position so here we should be like probably good to go and we can move things up so let me just save things and if we go ahead and like hold things up hold the to-do item and drag it over the page we get this really nice dragable uh effects in here as you can see whatever we drag it over the page we get this really nice event so here we can drag things up also we can drop it but not actually so we can't fully drop it but you know we can we can work with it so to drop it we can only change from is mouse down from True to false so we can just uh remove the Handler of the is mouse down just set it to Fs in here now if you try to like move this drop it and here you go now you can drop it out of the mouse and drag it put it whatever on the page position so that was actually guys for this video tutorial also we have like a couple of bugs in here happens I don't know very awkward bugs things uh it just happens I don't know why why so move let me just move item so that was actually guys for this tutorial that was very simple thing just moving and handling or just covering the uh actually the draging the system how it works and just explaining the basic stuff and the setup that we need behind the scenes so in the next video Tor we just going to cover the all things that you have seen the demo the snap the highlights how you can just drag this and drop and just going to snap snap into the right position and yet yet a lot of things have been or has left for us to do on this particular Tut so thank you guys for watching I really really do hope you enjoyed and I will catch you all in the next video tutorial