Drag and Drop JavaScript Tutorial - Getting Started - 1

hey everybody this is greg fine the code creative back with another charming little video this time all about the drag and drop api so what are some of the uses of drag and drop in an application well there are a few that i can think of the first one that comes to mind is reordering a list like for example a to-do list we might want to allow the user to enter their various to-do's but then also give them the ability to reorder those items in the list and we can do that by way of drag and drop another example that i can think of is something like a trello board or a kanban board here we would have items or tasks that we wanted to move to different columns based on the progression of these tasks so as these items are worked on and progress is made we would like to allow the user to be able to move those tasks from column to column to show that progression and then another example that i can think of is something like a game like a child's game for example let's take a look at this little parking application that's referenced here in the mdm web docs for the html drag and drop api so here's this little parking game in which we see these four different types of vehicles here we have a fire truck an ambulance a car and a bicycle and what we have to do is we have to drag the vehicle that's allowed to park at this time so right now it's a monday around 1 50. so if i look here that's going to tell me that i am allowed to park the car so if i was to try the fire truck right now i'm dragging it and you can see that we're not going to be allowed to drop this onto the box at this time and this is indicated here with this red background in the box however if we try to drag the car we get a nice green background telling us it's okay to drop so we drop it and there we go it's been removed from this list and dragged into this element here now that we have a better idea of where we can use drag and drop let's move into our code editor and start looking at some code i'm working here in vs code and i have my index.html file here already set up with some basic boilerplate if you look at line 8 you can see that i have my style sheet styles.css and on line 11 i have my script tag with my javascript file app.js so if you're following along you might want to go ahead and create those files now and once you've done that the first thing we're going to look at is how we can make elements draggable so let's say i wanted to make a simple box and to do that i'll create that with a div so i'll come into the body of my html i'll make a div and let's give it a class and we'll call it box and then let's go ahead and open up our styles.css file i'm actually going to put it here on the right side of the screen and let's create a rule for that box class or that box element we'll give it a width of 100 pixels a height of 100 pixels and let's give it a border so let's switch over to our browser now and take a look at what we have and here we go a very exciting box notice though that if i try to drag it nothing is happening and that's because with an element such as this we need to set an attribute on the html element and that attribute is the draggable attribute so let's go ahead and do that here on the html element we'll just do draggable and set that equal to true in quotes like this right now let's go back to the browser and once again try to drag that box and now you can see it's actually moving it's dragging oh snap just to point out though some elements are actually draggable by default so we don't even need to use this attribute and those elements would be text selections and links and images so as an example let's pull in an image of my favorite spice girl which is baby and i happen to have all my spice girls nicely organized here in a folder i like to keep my spice girls organized in one directory so what i'm going to do is i'm going to select that directory as the source and pull in baby.png and notice there is no draggable attribute on this image element let's flip back to the browser and let's see if we can drag baby and yes we can and notice actually if we drag her to this url bar up here and we hit enter we get taken directly to that png of her now as much of a blast as it is to add this draggable attribute to html elements this is just one part of the story because so far we're just dragging elements but we're not dropping them anywhere it's sort of like freaking frack you can't have frick without frack right so here's what we're going to do we're going to bring in our good friend javascript to help us deal with some events associated with dragging and dropping and these events are as follows we have drag drag end drag enter drag leave drag over drag start and drop and so you might see all these events and i'm not sure if you're wearing your pajamas right now but if you are wearing your pajamas and watching this you might be thinking holy moly how am i gonna learn to handle all these events so let's go back to vs code and let's set up something we'll get rid of that spice girl's image we don't need that we'll keep our box but instead let's rename the class on this one to source let's make a second div and for this one instead of calling the class source we'll call it target so both of these divs are going to appear as boxes on the screen but the source div is going to be the one that's going to get dragged and the target div is going to be the drop zone this is going to be where the source div gets dropped onto so we don't need the target to be draggable so let's get rid of this attribute here now let's go ahead and let's add some css so we can actually create these boxes so i'll open up styles.css and i'm going to create two rules in here one for source and then after that we'll make one for the target for the target we'll give it a width and height of 100 pixels and we'll put a border around it so that we can actually see it for the source because this is the element that we're going to drop onto the target let's make its width and height a little bit smaller 75 pixels each give it the border as well and for the target i'm also going to give it a position of absolute so that way once we move the source element onto the target the target won't shift its position on the screen causing massive confusion in our heads and we'll position that 150 pixels down from the top so we save we go back to the browser and here's what we have we have our source element and we have our target and we're going to use those javascript event handlers we just talked about to drop this source element onto the target so let's get going so our css is basically done now we can close this and instead let's open up our app.js file now the three events that we're going to look at in particular here are drag start drag over and drop and it's those three events that we're going to use to drag the source element here onto the target element or the drop zone so the drag start event is the event that's going to fire once we start dragging on our source element and what is dragging actually well the user will drag the element by holding down on the mouse and moving the mouse at the same time so it's a combination of a click hold on the mouse with a move and just like we can respond to other events like click event or mouse over event we can do the same thing with these drag events so first let's set up a drag start event or dragstart event handler the first thing i'm going to do is i'm going to get access to these two divs here in the javascript so i'll make a const source set that equal to document query selector and we'll get the element with class of source which is that source element and then we'll do the same thing for the target we'll say cons target equals document.queryselector and we'll say class of target so now since the source element is the one that we're going to be dragging we're going to add an event listener to that so we can say source dot add event listener and again it's called drag start and we're just going to take a look at it real quick in the console to see when it gets fired so what we're going to log out is the event the event gets passed in here and then we're going to console.log out that event so let's go to the browser let's open up our console and pay attention to the console down here as soon as i drag you see drag event get logged out to the console so the event that's being referred to is the actual drag start event but hang on a minute we're not just here to log out events to the console right we want to do something useful with this dragstart event so let's do something useful with it well first let's examine the drag event itself what i want you to pay attention to in particular is this data transfer object here which has its own properties drop effect effect allowed files items and types basically what we're going to be using this data transfer object for is sort of like a mini database what we're going to do is we're going to set an id on this source element and then when the drag start event is fired we're going to add that id to this data transfer object so that when we drag and drop it over the target element we can retrieve that id and using that id we'll be able to append this element to this target element which is going to effectively allow us to drop the source element onto the target all right talk is cheap let's actually do it so we'll go back to vs code and the first thing we're going to do is we're actually going to add an id onto the source element so in the html on my line 11 i'm going to add an id and also call this id source and now that this element has an id we can pass that id along via the data transfer object that we just looked at and we're going to do that by using its set data method so let's come here into app.js we can get rid of this console.log now and instead we're going to say e which is the event and that event has the data transfer object on it and that data transfer object has a method called set data and this setdata method takes two arguments so the first one is going to be a string representing the type of data also called the mime type in that id of source being a string of text we can use text plain for that and the second argument is going to be the id itself so to get that we can say e dot target dot id so now once the user has started dragging the element the drag start event will fire the id of the source element will then be put into the data transfer object via the set data method and as we'll see in a second when this element is dropped onto the target we're going to retrieve this piece of data or this id so let's go ahead and set up that target element now and we're going to add an event listener to that one namely the drop event and we're going to use this to identify when the source element has been dropped on the target and once that drop event is triggered we're going to retrieve the data or the id that we got from the source so what we're going to do in app.js just like we did with source we're going to take target we're going to add an evaluator to that and as i mentioned that's called drop again we're going to set up the callback function passing in the event and here we're going to say e or event dot data transfer right this is just like we had done with that source element but instead of saying set data we're going to say get data and this only takes one argument which is going to be the type or the mime type in this case text plane so when we call getdata on the data transfer object with textplane what we're going to be getting is the id of the source so let's actually store that id in a constant let's call it source id and then let's log out that source id to the console to make sure we're actually getting the id so let's save and go to the browser and we're going to drag the source and drop it onto the target element boom what where's the id we don't see anything in the console what's going on here well here's a little tricky thing that you got to know whenever we want to drop a source element onto a target we have to call prevent default on the event see because the browser doesn't just allow us to drop elements onto other elements that would just be pure pandemonium in the streets so what we're going to do in here is we're going to come in and we're going to say e dot prevent default like that now if you didn't think that was tricky enough there's actually one more thing that we have to do we're also going to have to call the drag over event on the target so we can call prevent default on it so that would look like this target dot add event listener drag over pass in the event and call prevent default on the drag over event as well alright so calling prevent default on the drag over event of the target and the drop event of the target are just things that we need to do in order to make this target element a valid drop zone really just using this here to say allow the drop to happen and once again let's try to log out that source id to the console when we drop the element onto the target so we'll drag and let's drop it onto the target and there we go now we see that little piece of data which is the id of the source element which we called source successfully got passed along by way of the data transfer object now that we're getting the id let's go back to vs code and let's finish this off what we're going to do is we're going to get rid of this console log here and instead we're going to say e dot target we're going to say on that target box we want to append child and here we're going to pass document dot get element by id and pass in the source id all right so what this is going to do is it's going to get the actual dom element according to the source id so it's going to get the initial source element and it's going to append it to the target element now let's go to the browser and let's try it out so we'll drag it over the target element or the drop zone and release and you can see we've actually dragged the initial source box to the target

Channel: The Code Creative

Views: 5,216

Keywords: drag and drop api, drag and drop, html drag and drop api, html drag and drop, html5 drag and drop, javascript drag and drop, drag and drop vanilla js, drag and drop tutorial, drag and drop game, drag and drop app, the code creative, gregg fine, web development, web development tutorial, coding tutorial, programming tutorial, javascript

Id: wBnHmV_LBpE

Length: 15min 9sec (909 seconds)

Published: Tue Sep 14 2021