How to use the Drag and Drop API - JavaScript Tutorial

hey guys hey going my name is diamond in today's video i'm going to be showing you the basics of using the drag and drop api okay so this api is really easy to use and as you may already know it allows you to drag and drop any elements okay it's also commonly used to allow support for dragging and dropping files in from the operating system for things like file upload forms and things of that nature although if you do want to know specifically on how to create a drag and drop file upload form i've actually got a whole video dedicated to doing just that so i'll leave a link to that video in the description below or inside the comments section but today's video is going to be the drag and drop api in general okay so we're going to be creating this right here we have essentially we have we have two drop zones for this element right here which we can then drag and drop between the two so like i said it's really easy to achieve something like this and i'll also briefly be covering the actual process of dragging in files okay so let's go inside this tab right here and begin from scratch so as we can see right here the support for drag and drop isn't there so let's add that right now but first let's go inside the text editor and we have something like this currently i've just minimized the css for clarity all of this stuff isn't too important but as we can see we just have a have a few css styles on the actual drop zones themselves so the actual two red and blue drop zones and then we've also got some styling for when the drop zone gets hovered over so as we saw earlier when you are dragging the drop zones lose their opacity by half so it's just simply a class to achieve that and lastly the draggable element has a width height and a background so in the html we can see currently we we just have those those two drop zones as well as the draggable element starting inside of the first one okay so with all that being said let's go inside the javascript and of course i start implementing what we just saw so first off the very first thing to do is actually going to be inside the html so we need to signify that this this black square is actually draggable okay so to achieve this we can simply add the draggable equals true attribute to the html element okay so now if i save this and refresh we can see we can now actually drag around the actual div okay so that's working perfectly fine the rest of this is going to be javascript okay so let's go back inside here now and first we're going to get we're going to get a reference to the actual draggable element itself the actual black div so we can say right here const draggable element is equal to document.queryselector we're going to be selecting the the id of my draggable elements just like that okay and now we're going to add an event listener okay we're going to say draggableelements.ad event listener we're going to listen for the drag start event okay and from this we can grab hold of the event object inside the e parameter and right here we need to set what data is going to be associated with the actual drag but first i just want to console.log e okay so now saving this and refreshing we can see right here if i start to drag we can see the actual the event appears inside the console if i scroll down we have right here this data transfer object so this data transfer object right here is important to how this is going to work essentially you're going to specify what data gets dragged around in this case right here we're going to essentially grab hold of the id of this black div okay and then when we actually drop the div onto this element this element right here is going to grab hold of that id that was sent alongside the drag and then simply move the element across okay so let's go back inside here now i might just increase the size of the code here to make it a bit easier to read so right here we are going to now simply assign this information so we can say right here e dot data transfer dot set data okay and we can say right here set data text forward slash plane okay then we can say draggable element dot id so right here we are assigning the information in the form of a text so text forward slash plain there are many different mime types you can specify here for the data type however i'm not going to be covering all of those in today's video a lot of the time you're going to be dragging through text so it should be fine for this example okay now right here we can see we are setting the data to be simply the id in this case right here is going to simply be my draggable element in the form of a string okay so now as we move around as as the actual drag happens right here the drag event keeps hold of that id okay so now it's going to be as simple as listening for the drop event on side this on the actual drop zone and then simply grabbing the id out of the actual drag event okay so with that being said let's go back inside here and we're going to be looping through each one of our drop zones so down here we can say 4 const drop zone of document dot query selector all okay we're going to pass through here the class of drop dash zone so this right here is of course going to select every single drop zone we have in this case we have a total of two the orange or the red and the light blue one okay cool so for each of these drop zones we can first listen for the drag over events okay so we're going to say here drop zone dot add event listener we're going to listen like i said for the drag over events and for this one essentially this is just saying whenever something is being dragged over the drop zone and this event here actually fires off every few hundred milliseconds okay so let's go inside here and we're going to say console.log let's just say decode as the message okay let's save this and refresh then we can start dragging over the elements and we can see right there in the console we start getting those events coming through okay like i said they're occurring very quickly now in order for this element to allow elements to be dropped inside of it or on top of it we need to prevent the default behavior of the actual event object right here so we're going to say right here e dot prevent default that is a requirement in order for this to work very shortly we're going to be changing this code you know what let's do it right now let's go inside here real quickly and we're going to say drop zone dot class list dot add we're going to be adding the drop dash zone dash dash over class to the actual drop zone so now we should see the opacity being changed we're adding this class right here very straightforward so now saving this and refreshing we can see now upon hovering over it the opacity is going to change just like that now obviously it is not going to go away we need to implement that manually so that being said that is the first step to allowing a drop on the actual element the second step is going to be listening for the drop event okay so we can say here drop zone dot add event listener let's listen now for the drop event okay so in this case we need to once again say e dot prevents default in this case right here for example the default behavior of dropping an element or file okay dropping a file onto the actual web page is going to be to open it up in a new tab or the same tab okay so by saying prevent default we're going to prevent that default behavior from occurring so now we're going to say simply console.log let's log out the event object now i just want to quickly copy and paste a comment from a from my reference here so we can just say up here when the draggable element is over a drop zone and for the second one here we can simply say when the draggable element is dropped onto the drop zone so now saving this and refreshing we can see here upon dropping the elements we get right here drag event inside the console now right here we have the data transfer object containing our information okay so with that being said we're going to simply go inside here we're going to grab the id and then do something okay so back inside here we're going to say we're going to make a few constants we're going to say const drops elements id okay is equal to e.datatransfer.getdata we're going to get data in the in the in the actual form of what is it so it is text slash plain just like that okay so once we have that we now have the actual id so we're setting the data in text plain to the id and now we're simply getting that same data so now we can say console.log dropped element id okay save this and refresh and we get right here in the console upon dropping we get my draggable element the data that was set up inside here okay if i was to say hey i'm done for example save this and refresh do it again we get hey i'm done okay so that is what we're doing right there so now it's going to be as simple as just saying you know what we can now say cons dropped element is equal to [Music] document.getelementbyid and pass through here the dropped element id now in this case of course we actually have a reference to the draggable elements but think about scenarios where you actually don't have this reference uh you know available to you okay so in the case of multiple elements maybe there's more logic behind this so in most cases you're going to want to use the actual data as your means of you know figuring out which elements to drag and drop okay so now we have this right here we can simply say uh dropped elements uh so my mistake needs to be drop zone so so drop zone dot append child then pass through here dropped element just like that okay so now it's going to simply move the dropped element the actual black box from that side to this side okay so now let's just save this and refresh and we can see right here upon dragging across and letting go it's it stays there okay so it can now go back and forth it's going to work perfectly fine so like i said we're simply grabbing the elements using the id okay and then we're simply moving it to the drop zone in which you actually dropped the element onto okay so now it's going to be very simple to remove the actual class of drop zone over in the case of a drop so we can say right here copy and then paste this and we can say remove the drop zone over class so now upon dropping it is going to remove that opacity as we just saw right there and now there's going to be one more place we're going to need to remove that opacity so that's going to be on drag leave okay so let's go back inside here and we can just say up here drop zone at event listener listen for the drag leave events and for this one we can simply say once we're inside here drop zone the same thing is down here so we can just copy this and paste it right up here and we can say as the actual comment when the draggable element no longer is over the drop zone okay so now saving this and refreshing we can see right here if i was to drag across it goes away as you move or as you leave the actual the actual drop zone and it's all working perfectly fine so that is the basics right there on how to use the drag and drop api so moving on to dragging across files it's going to be very easy to achieve this okay so it makes use of the file api in javascript so let's just go right down here and we're going to say inside the drop event we're going to say once again console.log e and just leave it like that so now we're going to save this and then refresh and as we can see of course upon dragging across the actual box we get of course something like this now if we scroll down we can see we actually get down here inside the data transfer object we get right here the actual files property okay so this contains a file list so if i was to now actually drag in a file okay just like this we obviously get an error right here because we haven't actually we haven't handled a situation where we actually have a file but moving back up to right up here the file list is unfortunately still empty in this example but behind the scenes it actually contains the file which we just dragged in okay so to demonstrate that let's go inside the code once again and we're going to say console.log e dot data transfer dot files just like that okay so now accessing it directly if i save this and then refresh and then try again to drag in that html file or that the actual text file we can see now we get the length of one and we get right here in the first index of the file list we actually get our drag and drop dot txt file okay so from that right there you can use all of the different methods for the file if it's an image you can of course convert the image into a an actual data url i've also got a video on doing that if you want to check that one out but you can do basically whatever you want with this file okay now i want to demonstrate real quickly also situations where you want to populate an input field okay so let's do that really quickly here let's go back inside the html and we're going to just add right up here a new input field with a type of file and we can give this an id let's just do for the id my file input okay just like that so now we're going to basically just say inside the actual drop event we're going to say document.getelementbyid and pass through here the my file input field id then we're going to say simply.files is equal to then you can simply just say e data transfer and then file so this right here is going to assign the actual file list of the actual drop event onto the input field okay you may you may also want to actually do something like this where you say file and allow multiple files okay but now basically if i was to save this and refresh once again we can see now we get no file chosen if i was to drag and drop this file in we get right here drag drop dot txt so we've essentially assigned the file list of the actual drag event or the drop event onto the input field itself and now of course you can do whatever you want with this input field okay so um there it is that is how to use the drag and drop api um thanks for watching guys and i'll see you later

Channel: dcode

Views: 15,536

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, js, javascript, html5, html, drag and drop, drag, dragging, drop, dropping, drop zone, event, drag event, file upload form, file, upload, datatransfer, move, elements, api

Id: OHTudicK7nY

Length: 17min 33sec (1053 seconds)

Published: Mon Aug 03 2020