Drag & Drop with Javascript in 4 minutes

if you've ever wondered how you can build dragable elements on a website using JavaScript then this video is for you because I just finished building this Notes application and while I'm working on a full tutorial to show you how to build all of this I decided to try to build something a little bit simpler so what we're going to do here is build this drag and drop feature completely from scratch it's actually quite simple once you see how it's done so let's go ahead and get started first let's set up a completely new project which will contain an index.html A main.css and a main.js file we'll want to make sure that our main.js file is imported at the bottom of the page after the closing body tag in our index.html file let's create a container div and a card div which will be the element that we're going to drag around on the screen next we'll add some basic styling to our application container and card element how you style this is up to you however the important thing to remember is the fixed position of the card this is key for being able to position the card anywhere we want inside of our main.js file let's kick things off by querying the card element and setting some starting coordinates we'll first set our star X and Y position which is where the card will sit when the page first loads and then we'll set our new X and Y position which will help us calculate the distance between the old position and the new one from here we'll create a function that responds to Mouse down events and then ensure that this function is called anytime the event is triggered now on Mouse down the first thing we need to do is set the star X and Y position to where the mouse currently is and this can be found by calling e do client X and E do client Y which will give us the X and y-coordinates of the current Mouse position we'll also need to add two event listeners to the Dom to listen for the mouse move event which will track the position of our Mouse and update the card placement and the mouse up event which will listen for when we unselect a card and we'll remove the mouse move event so we can stop moving the card around on the screen let's go ahead and create the mouse move and mouse up function before we continue to The Next Step the mouse move function is where all the magic happens here we'll first update the new X and New Y values by calculating the start position minus the current Mouse positions this will allow us to calculate the distance from where the mouse was on first click to where the mouse is at the current moment the difference between each position will only be a single Pixel because we're firing this event on every move as soon as we update the new position we immediately want to reset the start position for the next move which is going to be where the mouse is currently at now to make the card actually move around the screen let's set the card top and left position to the current start X and start y position just so this all makes sense give this a test by coning out the new X and New Y positions along with the star X and start y position and then open up the console and click the mouse and move your mouse around a little bit this should give you a better visual of how we're tracking the current Mouse position with star X and star Y and also calculating the distance moved with new X and New Y so we're almost done but there's still a few more things that we need to do first we want to make sure that whenever we let go of the mouse we can stop dragging the square around the screen and second we want to fix the positioning of the square whenever we select an item right now regardless of where I click the Square's top and left Position will always start where the mouse is currently at and that's not exactly the behavior that I want to allow a user to stop dragging an element we'll simply remove the mouse move event listener from the Dom on the mouse up event and that fixes our first issue now for the placement of the card on Mouse down what we need to do is calculate the distance from our card's top and left position from the new X and New Y values this will allow us to know the distance and direction to move the card on each Mouse move while deriving the values from the current Mouse position when the move is made so basically when the mouse moves we just want to know which direction to move the card and how far to move it so that's it for this video be sure to leave it a like if it helped you out at all and make sure to subscribe to the app right YouTube channel if you want to see the full Notes app tutorial and other videos like this

Channel: Appwrite

Views: 21,799

Keywords:

Id: ymDjvycjgUM

Length: 3min 57sec (237 seconds)

Published: Tue Apr 09 2024