Drag And Drop Using Native Javascript 02

everyone is a boy Edwin welcome to a new video or to the park to of making the dragon drop using in native JavaScript so here we are in the second part after covering the first part only the dragon system so look like the moving the item around the page nothing else or nothing more nothing less so only we help implement in the last video tutorial is just dragging the to-do item around the page and that's it so happens implement yet this snapping in the hover item where we get there like the container that show us that we're gonna like put this item into this specific location or this specific position and Yeti avianna and also when we release that we don't get this effects were just gonna get snapped into the right position so this video tutorial we're gonna implement all of that I'm gonna finish the tutorial of the to-do item and of the dragging and dropping pretty much it this be tutorial I'm going to implement the drop in and snap in into the right position and in Dodi to do container so as I've said in the last video only covers the to do or only cover the jogging system and we have talked about a lot about the on Mouse down mouse move and mouse up events and which events actually can unlike Lala was to move the lights him around the page or dragging item you around or drag any element actually using javascript around the page using native JavaScript so today's one what we want is create like a multiple containers into the new container like invisible containers and whenever we take that item into one of these containers the container that we aren't going directly on a whole grain over its just gonna like show up and we're just gonna say some kind of a border or something that I'm gonna show us that I'm gonna put the easy to don't lie to me into this particular location so you're just gonna preview or something and we never release that it's just gonna go right into this position that we have we have been seen so for this particular job what we're gonna create is creates like a virtual items let's say we want to create six item fields into this to do container so I'm just gonna go loop through and created six containers in here like small containers the same same size as the to do item actually and whenever we create that I'm just gonna set them to invisible so the user won't be able to see them like normal in here unless he takes the item and hover and like a drag and hover over the one of these containers emitters gonna show the currently Hubbard on or the currently over on a container so that's how we can use the or we can create the preview of that so with that let's go in and creates new items using the JavaScript and we can either down to the Dom or it should be more particular tempted to do container like an item so let's go ahead and create that so for this particular job we need a whole loop so let me just go ahead and create that so I'm just gonna call it let's I equal 0 and I I less than let's say J what isn't gonna go ahead and create six containers in here so sex and I plus plus and just gonna create that so in this particular container is what we want is secrete again so each step and then append each depth to the Dom or 2d to-do item container so let's just go ahead and create that so let me just call this like snap so this isn't gonna be like the snap or the position we want to snap two things in and just gonna go in and use the document or create elements and the create element here we specify which animals we're gonna create to this particular one you may create just a depth symbols that is how we couldn't create an element also what will not now is to add this element into this particular container so added as a child and if you can remember the last video tutorial we have actually like the as you can see here the to do is container we have referencing and it's embedded to do is container variables so this is like the same container in here that we are referencing all we gonna do it just called to this container dot append child and we can add this particular charge in this container and to be a little bit more specific in this case we're not going to add only once white child to this we're gonna I'm actually sex child since you are indoor looping each time you're just gonna go ahead and add a new dev to d2u container so for that we're just gonna reference that and we're gonna say to dues container dot append child and for append any charge is gonna give it a try block pin and here we go so here we have competitive child but we still can't see anything in here we can't see language if the child has been successfully added to this to do containers or they have been added to the Dom successfully or something that so that's why endure my CSS I have already created that style as I've said so it's already predefined into the first part of this video tutorial so just go ahead and go my website and you're gonna find all the parts can see needs to drag-and-drop just click it any can find the pool style in there so just go ahead and make sure to take a look on there if you really mean the style as I did as you can see I've structure and this is the first time I'm gonna use so just copy and base it if you're really intending to use my style so here the most important part is the snap class so this is gonna be like for a single snap container so just gonna have like a width and a height of 30 pixels 301 pixels width I'm also margin between both or two snaps like on like alongside each other also the upper class and the upper class what we want it is to add this upper class into one specific snap container only when we aren't holding it to the item and we are currently hovering over the currently or the current snap so that's how weekly show up that's we are currently hovering over like snapping Tina so just for showing the background color and also border and given a gibbet also a border radius this is just some kind of like a preview and giving it some real nice background so we let the user now that we're gonna put this to the item and do this particular area so with that we're here we need to add a new class so we'll just go ahead and open this class to it so I'm just gonna say snap don't cost me and the class name is gonna equal to snap as you can see and just for now for testing purposes like just go ahead and add the over class so we can like say we are going to see in this particular thing so as you can see here we are seeing each one and we are saying like the snaps taking part of each other we can also go ahead and do the silent here and like margin-top between each other let's say gonna go ahead and 15 here and also 15 in here just to make like some padding between them all so let me just add this into 20 and also this 20 just to make it looks a little bit prettier 25 would say 3 5 I don't know 25 does it gonna fit actually it fits pretty much perfectly in here you can see we are adding all of those in the perfect way so just on in the over class what allow us to just take a quick snap pic of what we are actually implementing or actually what we're actually adding to be particular done let me just remove that since we don't need it anymore and now what we want is to check if this to-do item is under one of these snap containers so this is like the most important part on this particular tutorial so to check that this isn't like actually events to take this to-do item and check if this events is happening under another element or something like that so we need to create a custom function that is gonna just keep checking and Fionn item is currently over another item which means if an item is currently colliding with an also another model I mean actually another item so this is a little bit more for the physics and stuff like that so it's not that hard but I've already got a man and made the function eyes like a very simple function actually so I've call it do collisions so I'm gonna just go ahead and call these this functioning here so as you can see this the function also you're gonna find in in this particular tutorial just go and in mind this particular or the recent story you can find this particular function the source code of this function just grab a copy BC and you have you are ready to go so do elements collide and this function takes element 1 element 2 to any checks for the collision between these elements according to the position of this particular image you can go ahead and read through I try to understand what it does or what is actually this function the wing but it's very simple but you know we can I'm gonna use that's just pretty defined function so here what we're gonna need to do is to give it the elements 1 the second element and we're just gonna return either true if they are colliding with each other or false if there's no collision I don't so with that what we need is to keep our like check in every single time interval if this to toe i sim or any other to-do item since we're gonna create have not secured to the items if any of these Tito items are currently over or colliding with any snap continuous since we have six snap continues something just gonna loop through all the snap containers and we're gonna check the collision between the door item and a snap container or a slab item so for that we need to take take this function and give it the don't item and snapping this so for that we'll just go ahead and we need to others as I've said always keep the check between the two door item in any other one every single second so to say that's the second isn't pretty much to that enough so what we need is to take a little bit more less time than a sank in which women use a hundred millisecond somebody's gonna use the function set interval and if you're not familiar with this function its predefined function with Java same comes in predefined so even meet you and Clark and totally actually we don't know why B or something like math so with the needs of JavaScript we from the DOM and set into a part is gonna execute a callback or call a callback or call a function you can give it this function every single time interval every song goes suck in every single I don't know some kind of time marches cents so the first thing as I've said it takes callbacks I'm just gonna be using ESX error callback and the second thing it takes how much but the duration between a callback and another callback so in this one I'm gonna give it a hundred and it takes in milliseconds so this represents a hundred milliseconds symbols that just go ahead and use this sentence of all know it each time we need to check the collision between the to-do item and any others snap container so here we need to go through all the snap containers that we have created in here so we need to loop back through them again so let me just go ahead and grab these snap containers in here so we need to look through them but before looping through them we need to get them or we need to reference this HTML collection of snaps or the array of snaps so this is gonna call it snaps equals document top against menu point class name that is the class name I'm just gonna give it the class since we have assigned us you can see here up top in here we'll assign the snap class to it so we can use it right on the box so just go ahead and reference that now we can move through each item in there so I'm just gonna say or let's I equals 0 and I is gonna look like it else or less than snaps of length and why should we have here hard-coded like length which is the sex but we can use this anyway and here we look through that now what we need is each time we check if this to-do item is truly in collision or now with this to-do item so if it is into a collision we need to show the currently collided with a container or snap container else if it's not in collision we do nothing we just discard everything we'll just keep hoping and checking again and for this what we actually going to need to do is to use our function so we can call F so here we call F do elements collision so this function what we have predefined in here and actually this function of not like takfir on it let me just define using the lens so we won't get any problem something and we say if do element so we are in collide with this to-do item sell here how we can reverse this to-do item there's a really nice way also if you're intending to create we also put it on items this way is gonna be like the perfect way to do that so remember when we use the unmask down so whenever we click this item we need to put or to store the cruelty collect item the last collect item and your variable so we can be used later on for checking the collision between the items and the snaps container so with that let me just go ahead all the way up and create that variable that you're gonna hold the currently collects or the last click to-do item so just gonna call it currents to do and the first time I'm just gonna equal to no and you can assign it whenever we click something in here just go ahead and assign that into there so under here so coins to do it's gonna equals the current item and remember this item representative your item and here everything is gonna be set up correctly so here we can pass in the current to do since we are already holding the current item the second thing which is gonna snaps the snap stop I which represents one of these snaps I have created one of the sex now such into the tutu's container and here it checks the past so if there's any collision we need to show this snap which means we need to append the new over class remember the over class coated only having the slap class into that so we need to add the over class into this or one of these items so therefore you can go ahead and add one of these under this item so it can access this we say snaps the kind of class name class name and we say plus equals plus equals since we're gonna compare to the string only and we use a space since we already have a class so classes or multiple classes and the one elements need to be separated between spaces so this like space for separation and here we go now we have out of the over class but there's one problem actually is when we over something here and we the class it just gonna be like stuck in there and won't be able to like realize or something or we hide the snap container when everything to do item is out of the collision with the last a snap item so you can clearly understand that so to do that we need to each single time to remove the over if there's any over clasp and that if there isn't just gonna just call this but each time we check if there is an over clasp in there the to the end of the snap continue we need to remove it so we just cannot like avoid any problems so before checking a collision on each flew let me just go ahead and say class name equals snaps I class name and here we can remove things up so class name dot replace so the place is a predefined function in those drinks and remember the class name is a string so we can replace something with something else replace a string into this class name and this trailer place is the over and we just wanna replace it with an empty string so that means we're just gonna remove the over class from the class name and do the snaps each snap and whenever there's a collision just gonna show that and someone and so forth so here it should pretty much now check for the collision and do everything so we'll just go ahead and drag that and as you can see whenever we aren't hoping over the snap continues shows up we just go over all of those as you can see in a very very nice effect so whatever we are hovering over some like stop material it shows up it shows this border so just gonna let us preview we're we're just gonna like a drop this to do I assume and whenever we move just gonna hide the last one is showing another one that we are only currently colliding with and if someone on so forth in a very very nice way so as you can see in here it looks pretty pretty good and whenever we are out everything is gonna just gonna be hiding away now let's play the the way of snapping things so whenever he rocks Chrissy whenever we drop this we get some no effects so this to-do item doesn't go and snap right into the position you're just gonna stay in two like the the position we have dropped it in and nothing happens it's nothing crazy going on behind the scenes in you so what we want is whenever you drop this it's just gonna go ahead and snap into this position the right position so to do that we need to replace or take this position and make it the same or equals to the snap container position so glad let me just go ahead and create a new function I'm just gonna call web snap to do and it's not to do the first one is gonna be likely to do and the second one is gonna be like the continue when I stabbed the to do in I'm just gonna call it container and here we go so this function you're just gonna allow us to snap this to do into the position of the snap so for that I'll just go ahead and create a variable we need to get the position of the container so there's like a function in JavaScript I gonna allow us to do that so remember the container is an element so we can use get clients I believe it's the the function of using get bounding clients rectangle so here is it it's the function so this function gonna allow you to get an object I'm gonna hold the end of the box variable and this object has all plenty of information into this element which hold the exposition the top the left the offset the width and the height and so on and so forth so many informations that we are actually going to need you know what to take this position of the to-do item and make equal to the snap container position so get bounding client rectangle into the container now after checking that we need to like take the to do item closed position and make it equal to this same position so we can say to do dot style so remember does this to do is like having an absolute positioning so make sure to do that I'm just gonna say the left the left represent the X access or the x position of the 2d elements so we're gonna say to spawns dot X and the second thing I'm just gonna go ahead and to do don't style tapas off equals box stop why and this pretty much won't work for us since the style if you can remember the style left and top takes like a string with the pixels at the end so this one it only holds a number without just pixels on the end so what we need is just to append pixels and this gotta like return us and using hold thinner pixels or prepending or up internationally pixels on the end of this white position index position now everything should be set up correctly also there's like one offset that we need from the offset of the page so just here to try to run ten in order to make everything looks normalized and everything looks good enough so here everything she looks pretty much fun let's go ahead and use this function and do him so what we want is to tell whenever we take a mess and we drop it so only when we drop the to-do item you're just gonna go ahead and stop into the position so how we can say to do like how we can check if we are dropping the elements using F statement and saying if not is Mouse down remember that we have this variable is Mouse down so if checking if not Mouse down which means if the mouse is not down then you can snap to do and the snap to do remember what it takes just copy down to make sure everything's working pretty much fine and the snap to do it takes the to do and which is the current to do in the second wing or the second thing is the currently hovered on snap container which is the snaps line and here we go now if we try to take this to do item all the way down I try to snap it in here drop it and as you can see takes into the position but it's not actually the right position that we are intending to do it but it takes me to that some somehow it can't actually find the regular position and as you can see I'm crashing so let me just save the work and everything saves now let me just refresh everything sometimes some bugs happens with code pen and your cursor stuck or something like that so just try to refresh the page and you are good to go so here try to put that Alice can see get this off and this is mainly because our in this 10 so I tried to make it looks good well it doesn't look super like surely so let me just try this again put it there and we still get this horrible offset let's try to like minus 10 plus pixels just go ahead and put that in there try again and as you can see it gets right into the position just try to manipulate that in order to make it fits yours sometimes it just gets very weird with positioning and stuff like that so just try to manipulate the numbers till you get the right result so as you can see guys here try to drop it or drag it drop it over here it just gonna snap right into the position so let's go see drop it it gets right into the position so those actually guys for this day for tutorial very simple very basic and very very flexible story so the incas watching again I will do enjoy so I will catch you all guys in the next video tutorial