Drag & Drop With Vanilla JS

[Music] what's going on guys in this tutorial we're going to look at JavaScript drag and drop events and we're going to create this little application here with some HTML CSS JavaScript and we're going to be able to grab an image and you'll see when I hover over any of these boxes that it gets darker and it gets a different kind of border and I can drop it in okay so we can move it into any of these boxes now obviously this by itself is not really a full application but I'm going to show you how to implement this kind of UI so you could you know use it in a game or anything where you'd want this kind of effect all right so let's go ahead and get started I'm gonna open up vs code and I have my file structure already complete basically it's just an index.html file it's a jjs and CSS folder the j/s has a main J's file the CSS has a style dot CSS file alright so they're all empty if you're following along just go ahead and create those files so in the index.html I'm just going to use Emmet I'm gonna say exclamation tab that will give me kind of a boilerplate and then we're gonna just give a title of drag and drop and let's make sure we bring in our CSS so we'll put a link tag here to CSS slash style.css and before I forget let's add the JavaScript so script source is going to be in the J's folder and then main dot J s all right now the HTML for this is going to be very simple let's actually just go back to the app real quick so each box here is going to have a class it's going to div with the class of empty and then the one that is actually filled is gonna have a it's gonna be a div with the class of fill inside of that empty ok so that's what we want to do and then through our JavaScript we'll add drag events for when we pick it up that'll be the drag start we have drag over drop and some other ones as well so we'll be taking a look at that all right now for this let's create I will say dot so class of empty and I'm using Emmet so I say dot empty for div with the class of empty and I'm gonna say times five and then tab and that'll give me five of those divs and then the first one is going to be the only one that has the fill class or the fill div and we want to add on to this the html5 property draggable because we wanted this to be set to true otherwise we won't be able to drag it at all so let's save that and that's it for our HTML so next we'll move on to the style.css and i'm just going to add a background color to the body I'll say background let's do dark dark salmon and that's all I'm going to do with the body now let's create our fill class so fill is like I said that's the one with the image that's the the filled box so let's say background you could do it just a color if you want but I'm doing an image so it's gonna be URL and I'm using an image from the unsplash service which just gives you like random pictures if you want of any size they have a really good API too so it's gonna be source dot unsplash.com slash random and then the size will be 150 times 150 ok so that'll just give us a random image every time we load the page and we're going to position this relative so that we can use top and left and stuff like that the height of this is going to be the same as the image so 150 pixels width same thing and let's add top we want to move it over 5 pixels and from the left 5 pixels and let's just set the cursor to a pointer so that when we hover over it the cursor actually changed changes to a pointer so now for the empty ones for empty we're actually going to make it display as an inline block because we wanted to have block-level properties but we want it to be you know lined up not on top of each other and let's see for the height for the height and the width we want it to be 10 pixels bigger than the fill because we want that spacing otherwise it's going to be oh it's gonna look weird so let's do height with both 160 pixels if you use something different like a hundred here then you would use like 110 here just make sure it's ten more all right so now what we want to do is just add a margin between each empty box so we'll do 10 make it kind of like a grid and then let's add a border so it'll be three pixels let's do salmon and let's do solid and then the background will say background color is gonna be white alright so we can take a look at this now you can open this with your HTML file or you if you're using vs code you can use I'm actually using live server which is an extension that will open up my HTML file on my local host so I can just go to just we need to go to the HTML and I can click and go to open with live server and that'll open it up alright so we have the image here we can move it but we can't do it it's not doing anything else if we set draggable to false we wouldn't be able to do this so that's why we need that that attribute so back to the CSS we have a couple other things to do basically when we click on it and we we hold down the mouse and we're dragging it I want to add a class called hold and for that class I'm just gonna add a not a background a border and let's do solid light gray 4 pixels okay and then also when we hover over the empty boxes I want those to have a class of hovered and with what we wanted to happen here is change the background from white to a light gray and then we also want to change the border style to dashed all right and then one final class will be invisible and this is just gonna be display:none and I'll show you why we need this in a little bit all right so that should be good now we can start on the JavaScript so we have basically two elements to work with we have the fill which is the the filled box with the image and then we have the empties so let's create variables for those so fill and we'll set it to document dot query selector and it has a class of fills so we want to put in here dot fill all right and then for the empties there's multiple empty blocks so I'm actually going to call this empties or you call it boxes or whatever you want but I'm gonna set it to document dot query selector all because there's multiples and basically we're gonna grab it and it's gonna put it into a node list as opposed to a single element so let's say empty right here so it'll select all the empty classes or elements and put them into a node list inside the empties variable and we can then loop through it and stuff like that all right so now let's add the listeners for our fill so we'll say fill listeners they cannot spell so fill dot and then we're gonna say add event listener in the event we're gonna listen for here is drag start okay it should be all lowercase and then we're gonna call a function called drag start camel case okay so let's add one more for fill and it's gonna be the drag end no not camel case I made that mistake I used to make that mistake all the time then we'll say drag and as the function all right so let's let's create a comment here and let's say Phil not Phil drag functions okay so we'll have drag start and we need to add function here so drag start and let's add function drag and so basically for drag start all we want to do when we when we click on it we hold it and I can actually show you when these run so we'll say start and let's go down here and it'll say and sorry guys shut that off alright so end and we'll go back to let's go back to our application and let's open up our console here and now I'm gonna I'm gonna click and hold and move it and you'll see that in the console we see start and then when I let go we see n so those are the events that we're watching for here now when I grab it and it starts we want to add the hold class which is this here which gives it a border a gray border and you don't have to do this but I just want to kind of show you guys the different events in what we can do so let's do this meaning the the fill element that we grabbed and we want to call class name or the class name property ends and we want to append to it so plus equals and we want to add a space here and then hold so we're basically just appending the hold class all right and then let's see what happens if we just do that so if I grab it and I move it notice that it's not really taking it out of the box it kind of doubles and that's we don't want that that's where the invisible class comes in and we want to use that but if I were to say this dot class name and I'm going to use equals which is going to replace it ok it's going to just give it the invisible class and that's it if I were to just do that when I click it it disappears and we don't want that what we want is us is a very minut delay so we're gonna use set timeout here so we're gonna say set timeout and set timeout takes in a function a callback so I'm going to use an arrow here and then I'm just gonna grab this and put it here alright and the second parameter of set timeout is that is the time but we can actually just put a zero here just to make it so that this happens after we actually move it so let's try that and now you can see I'm actually pulling it out of the box okay so that part is actually very important and then for drag end all we're gonna do is set the class back to fill so this dot class name we're not appending it we're just setting it back to fill like that so now when I let go it actually you know it's still there it doesn't disappear alright and that's that's pretty much it for the fill listeners now we want to handle the empties alright now since this is a node list and not a single element we're gonna just loop through so let's say loop through empties and we'll loop through the empties and call drag events so I'm going to use a four of loop here so we can say for Const and I'm going to call this empty this is the variable we'll use within the loop of empties alright and then for each one we're gonna say empty dot out event listener and this event is going to be the drag over so basically when we drag over the empty box then we want to call a function called drag over like that and then what I'll do is copy this down four times because we have four other events this one here is going to be drag enter so right here I'll say drag enter and then this one is going to be drag leave so when we leave the the box leave and let's see this one here whoops this one here is going to be drop just drop but we're going to call the function that we run drag job like that okay so now let's go down here and let's create function drag over which I don't want to do getting used to these Mac keyboards so dragged over actually we'll just copy this because we need three more functions like it so one two three and this one will be drag let's see drag over a drag enter drag leave and drag drop okay so let's see if you wanted to actually we'll just do this will show you when each of these run so over and let's just copy that just doing this real quick just to show you guys so this will be enter leave and drop alright so let's go back here and let's grab it and now notice that when I'm moving it over is just firing off when I go into the box it enters and then leaves okay enter leave enter leave and to leave and when I drop and actually you know what drop isn't even going to run because the the drag over we actually have to prevent the default behavior so we can pass in an event parameter since this was part of an event listener it's a response or callback for an event listener and then we can say e dot prevent default like that so now if we go back and I let go now you can see it actually calls drop okay I know that those this is really small but it's calling all the events that it should and all the functions that it should which is good alright so let's get rid of these console logs and I realize that this you know I didn't have I don't have to do this stuff but I like you guys to actually understand what's going on and when these are firing off rather than just watching me code and not showing you like what's going on so drag over is is just that it's just going to we're just going to prevent the default now drag enter we also want to prevent default at first okay and then what we want to do is we want to we want to add the hovered class so this dot class name and we want to append hovered so space hovered and that what that'll do is it'll give it that that dashed border in that background okay and I'm talking about the empty blocks boxes and then on drag leave what we want to happen is we want to replace hovered we don't want hovered there anymore so we want it to be just empty for the class so this dot class name equals and empty alright now when we append obviously it just adds to it so when we enter it's going to be have the class of empty and hovered but when we leave it's going to go back to just empty it's going to get rid of the hovered because this replaces it okay this appends to it this replaces it and then finally for drag drop we want to I don't know why I'm writing div we want to set the class name to empty but we also want to append the fill okay so I don't mean add a fill class or anything like that I mean actually take the fill element which we defined right here and append it into the empty div okay so if we look at our HTML we want to be able to move this around into each of these and we do that with the append method so we can say this dot append okay so this meaning the empty that were clever dropping in and we want to append the entire fill element and that should do it so let's try it so I'll grab this and now as I hover you'll see that effect and then when I drop it'll actually drop in and if we look at our console over here you'll see right now it's in the second one the fill but if I go when I move it here now it's in the third one but I move it to the N one now it in the n1 all right so we're essentially moving it around the Dom which is what we want and this is all possible because of these drag events and because of the html5 draggable property alright so hopefully that kind of explains drag drop to you guys obviously this isn't like a real application but this is something that you would implement into the UI of your application if you wanted to so that's it guys thanks for watching if you like this video please leave a like and that's it I will see you next time thanks

Channel: Traversy Media

Views: 206,337

Keywords: drag and drop, drag drop javascript, html drag and drop, dragndrop, drag and drop tutorial

Id: C22hQKE_32c

Length: 19min 0sec (1140 seconds)

Published: Tue May 22 2018