Drag and Drop JavaScript Tutorial - Custom Drag Image - 3

all right welcome back to this third part in our drag and drop api series this is going to be a fun one because we're going to look at how to create a custom drag image when we drag our source elements so what i'm going to do is i'm going to go into vs code and if you haven't seen the first two parts in this series you might want to go back and check those out before you get to this one but if you have seen those this is the code that we had previously and i'm actually going to comment out these lines from our previous source and target elements and instead what i'm going to do is i'm going to bring in an image element or i'm going to create an image element and for the source i'm going to get our spice girls baby.png image let's go back to the browser and there we can see baby in all her glory now what i want you to notice is that when we start dragging the source element we get this kind of translucent draggable element but what if we want to customize this like what if we want to spice it up a little bit well that's what we're going to find out how to do in the next couple of minutes and it's going to be a full-on party so let's get to it so how we're going to start is we're going to go back to vs code and then right under this image of baby we're going to create another image in the dom and this image is going to be our custom drag image so i've actually created my own custom drag image called baby 2 which i've placed in the spice girls folder and we can see this in the browser there it is we're going to be using this image here which says spice up your drag which is a take on the song spice up your life which comes from the 1997 album spice world and you may have danced to this one at a wedding or a bar mitzvah or a bat mitzvah but anyway what you should know is that this secondary custom drag image needs to actually be in the dom but of course we don't want to see it from the outset we only want to see it once we start dragging so what we're going to have to do is we're going to have to hide it and we're going to do that in our styles.css file so let's place that here on the right side of the screen and we're not using that source to target so we're going to comment those out just so we can get a little bit more room on the screen and so we can create a rule for this custom drag image let's put a class on it we'll say class equals baby 2 and then we'll create a rule for baby 2. and basically what we want to do is we want it to be present in the dom but we don't want to see it initially now there's various ways that we can kind of position it off the screen but i'm just going to do it this way i'm going to give it a position relative i'll create a left property and i'll say something like minus ten thousand pixels right so now if we go back baby two is still actually in the dom as an element but we just don't see it here because it's positioned way off the screen now i should say as well that this secondary custom drag image it doesn't only have to be an actual image it can actually be any other visible element now so far if i drag on baby we still get that translucent image the same one a baby so in order to get our custom drag image to appear when we start dragging we're going to have to do some javascript so let's go back into vs code and let's go into our app.js file and again let's just comment at everything we had previously since we're not going to be using that here and let's make some room on the screen and what i want to do is i want to get hold of these two image elements in the javascript so i'm going to come into my html and i'm going to give them both ids first one will just say id equals baby the second one will say id equals baby two right now in our javascript file we can get reference to those we'll get the first one const baby equals document.queryselector get that element with the id of baby and then let's get baby2 document query selector id of baby2 cool now in order to set our custom drag image we're going to first attach an event listener to that baby element and this event listener is going to be the drag start event it's this drag start event which is where we want to set up our custom drag image and then as usual in our callback function we're going to pass the event represented here by e and the method that we want to use is called set drag image and this set drag image is available on the data transfer object let's first log this out to the console so we can see this set drag image method so as we said it's going to be on the data transfer object on the event so let's log that out and we should see this on drag start so let's look at the console and there's the data transfer object and we don't see set drag image here but if we look at the prototype we find it here set drag image well now let's go back to vs code and actually do something useful with this set drag image method so as we said we're going to call set drag image on e.data transfer and this method is going to take three arguments the first is going to be the element or that custom drag image which for us is baby two so we're going to pass that in here as the first argument and then the second and the third arguments are going to be the x and y coordinates for the offset that is the offset of the cursor in relationship to the custom drag image so for now let's set the x to zero and the y to zero so our cursor should appear at the top left corner of the image so i'm going to save we'll go back to the browser and let's drag and there you go spice up your drag and notice the cursor is at the very top left of this custom drag image but let's go and let's experiment for a second with these x and y coordinates so if i hadn't said it before the x and y coordinates these are going to be relative to the width and the height of the image or the custom drag image so if i know that the baby 2 image is 185 pixels wide and 360 pixels high if i wanted to place the cursor directly in the center of this image i would divide the width for the x-coordinate so since i said it's 185 pixels we'll do 92.5 and for the height i said it was 360 pixels so divide that in half we get 180. let's save that and let's go back to the browser now let's drag and notice where the cursor is directly in the center of the custom drag image you

Channel: The Code Creative

Views: 4,797

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, custom drag image, set drag image, create custom drag image, creating custom drag images, drag and drop vanilla js, drag and drop tutorial, drag and drop game, drag and drop app, drag and drop user experience, drag and drop visual, the code creative, gregg fine, web development, web development tutorial, coding tutorial, programming tutorial

Id: Nnga6nMNOpI

Length: 6min 57sec (417 seconds)

Published: Fri Sep 17 2021