Placeholder Image

字幕列表 影片播放

  • Nearly all websites need a little bit of dragon drop functionality.

  • So in this video, I'm gonna show you how to build a really simple sore double dragon drop system using just html CSS and benevolent JavaScript.

  • So let's get started now.

  • But before we get started, I want to tell you how you can get an entire year of hosting for free.

  • By using today's video sponsor atlantic dot net hosting atlantic dot net is giving you an entire year of free hosting on their servers and these air powerful servers that are more powerful than the servers I host my own website on.

  • So if you go to atlantic dot net linked in the description blow and used the code Kyle, when you sign up, you're gonna get an entire year of free hosting as well as an additional $50 of credit to use.

  • However you see fit.

  • So make sure you check that out because this is a great deal, and you're not gonna find this much free hosting anywhere else.

  • Welcome back to Webb.

  • Have simplified my name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner.

  • So if that sounds interesting, make sure you subscribe to the channel for more videos just like this.

  • Now, on the right, I have the final version of the product we're gonna be building.

  • As you can see, it's very simply styled.

  • But we can select any element in these list and we can drag it around and you can see we get this nice little ghost image.

  • Appearing on our cursor as well was an indicator of where the item is going to be placed.

  • And then when we released the item, it's going to be put exactly where we want it.

  • And we can drag items between any of these containers back up to the container, and it's really flexible.

  • And the amount of code to create this is actually pretty small.

  • So in order to get started, I just have an empty project Open up in visual studio code.

  • We're going to create an index file called index dot html.

  • We're gonna have a style sheet called Stiles Nazi SS just for these really basic styles.

  • And then we're also going to have a script dot Js file for all of our different JavaScript And now in our index dot html, we just had exclamation point hit tab or enter is going to fill out all of this bully of a plate for us and we can come in here and link our style sheet, which is called Stiles Nazi SS.

  • We can also linked our JavaScript, which is just going to be called script dot Js and we're gonna make sure we give this differ attributes so it loads after HTML is done.

  • Now, inside of our HTML, we're gonna build up an initial container that looks like this where we have 12 in the top and 34 in the bottom.

  • So we're gonna have a div with the class of container, which is going to be this black box.

  • So we're gonna have two of those dibs and then inside of these dibs, we're going to have a bunch of different P tags, and these P tags are going to be 123 or four.

  • So we're gonna give them a class of dragon ball so that we know that these air drag a ble elements and then in order to make something drag a ble using Java script there's an attribute called Drag a Bowl and we just need to set this to true.

  • So if we set this dragon will attribute to true, we're already partway there into making elements on our page.

  • Drinkable.

  • Now let's just put the text of one in here.

  • Copy this down and have another one for two.

  • And then we're gonna copies into our bottom container so that we have a three and a four and can save that.

  • And if we just right, click this and open with Live server, which is an extension for visual studio code you can download.

  • You can see we have 123 and four.

  • So now, in order to style these properly, let's just open up our style sheet and do a few really minor styles.

  • So the first thing I want to do is select our body and remove the margin so that we can get our black container pushed right up against the side of our screen.

  • And then we're gonna style our container to give it that black style look.

  • So we're gonna say a background color here, so background color.

  • We're gonna make this background color.

  • 333 just gonna give us this nice grayish color, as you can see over here.

  • And then we want to give it a little bit of Patty and soul say one R E M, and we'll give it a little margin on the top of one r e m just to space these black containers out from one another.

  • And now we can slip are different, drag a ble elements and inside of our Dragonball elements, we're gonna give them a little padding on their own, a background color, which is going to be white.

  • And if we save, you can already see that starting to look good.

  • Let's just give them a little bit of a border.

  • I'll say one pixel, solid black, just to give him a little bit of appearance like that and then, lastly, to get this nice little movable cursor.

  • What we can do is just change our cursor over here to be move, and now we hover over any of these.

  • We get that nice little movable looking cursor, and as you can see already, we can drag these elements by just clicking on them.

  • And that's because of that Dragon ball property.

  • But it doesn't matter where we dragged them.

  • Nothing's gonna happen.

  • They're not actually going to move.

  • So we're gonna need JavaScript to set that up.

  • So now inside of our script dot Js let's actually just select the different elements we're going to need.

  • The first thing that we're gonna need is to get the different elements.

  • We can drag all of these different p tags so we can just get an element called Dragon Balls, which is going to be equal to document dot query selector of all.

  • And we know that these all have a class of dragon ball, so we can just use that Dragonball class Next, we're gonna need to get our different containers because the containers are where we're able to drop our different elements.

  • So when you're doing drag and drop with HT melons JavaScript, you need to know what your drag a ble elements are in our case, these different P tags and you also need to know where you can drop these elements.

  • Which of these black rectangles in our scenario.

  • So we need to get those containers so we could just do another document dot query selector all and this one we're going to get for that dot container class, which we already know is going to be these black containers.

  • So now once we have those, we can set up all of our event listeners.

  • So let's do our drag a ble event, Listeners.

  • First, we can say dragon balls dot for each so that we can loop through each of our dragon balls.

  • And when we looked through each one of these, we want toe add some event listeners so we can say drag, a ble dot ad event listener.

  • And the first event listening that we want to listen to is what happens as soon as we start dragging our element.

  • And this is going to be the drag start event and this gets fired as soon as we start dragging an element.

  • And I can prove that by just saying, consul dot log, drag start.

  • And now we just inspect this real quick, dragged this over so we can see our council.

  • And if I start to drag this, you're gonna see we get that drag start printed out every time we start to drag any of our different P text.

  • So this happens only when we first initially click and start our dragon and it won't fire again at all until we start a new drag.

  • So that's really useful.

  • So what?

  • That drag start?

  • What we can do is just apply a class to tell us that we're currently dragging this element.

  • That way we can get this nice little opaque style where we have this element.

  • It's a little bit different color than the rest of the elements.

  • So in order to do that, let's just say our drag a ble.

  • All we want to do is we want to come in here, get our class list, we're gonna add a class, and we want to add a class called dragging.

  • And then in our styles, we can select any drag a ble that has that dragging class.

  • And we could just change the opacity down 2.5.

  • And now when we start our drag, you can see that that opacity changes 2.5.

  • But when we released our drag, it still stays at 0.5.

  • So we need to set up another event listener on our dragon ball.

  • And this event listener is gonna be one.

  • Our drag stops so we could just come in here and say, Drag end, which is the same thing is drag start, but it calls as soon as we let go of the element and inside of here we do want to just remove that class list so we can say class list dot Remove that dragon in class.

  • And now, when we cover this, you see, it gets that nice boat PE class, and when we release it, you can see that class goes away.

  • And that's because of these drag, start and drag and events.

  • So now we have all that nice stuff for dragging our element around to changing the class.

  • So changes its hope.

  • A city.

  • But what we need to do next is actually built to move this element around inside the container as well as drop it in other containers.

  • So we need to look through our containers in order to determine how are dragging works.

  • For one, we're dropping our element as well as how when we're moving our element around, so we could just say containers not for each container poops every go and inside it here we need to listen to an event called drag Over So we can say container dot at event listener and this one is drag over.

  • And then we could just run this function and just to show you what's happening, let's just council dot log inside of here dragged over and again, we inspect our page.

  • Bring over that counsel.

  • We can see that as soon as we start dragging an element over our container, it's printing out drag over all the time, just repeatedly printed out, over.

  • And whenever we go outside of our container, you see that drag over stops.

  • But any time we're in a container, we get that drag over function being ran.

  • So this function is gonna be really useful, since we can actually determine which element we're over top of Hezbollah's if we're not over an element at all, and it's gonna constantly run every single time we move our mouse.

  • So in order to actually take advantage of that, what we need to do in here is, as you can see over here, we're determining what position are.

  • Element is inside of the container based on our mouse, and we're also determining which element it is inside of.

  • So if it's in the second container or this first container.

  • So we need to do all of that logic inside of this drag over function.

  • The easy way to do this for now is to ignore all of this sorting and just determine if we're inside container one or inside container too.

  • So in order to do that, what we want to do in here is get are dragging element, essentially get the element we're currently dragging.

  • And that's pretty easy to do.

  • We can just say constant drag a ble which is going to be our current drag.

  • A ble is equal to document die query selector, and we know that only one element will have the dragon class at a given time since is the element we're currently dragging.

  • So that'll be this Dragonball element here, which everyone we're currently dragging.

  • And then all we want to do is a pendant to whatever container were inside of So we can say container dot upend child.

  • We could just pass in our dragon ball.

  • Now when we hover this you see it for inside of container one.

  • It's gonna add it to the bottom of container one.

  • And if we go down to container to.

  • It's gonna add it to the bottom of container, too, and we'll release.

  • You can see it stays inside that container.

  • Same thing with up here and down here.

  • But one interesting thing you notice is that our cursor has the do not allow simple.

  • You see that kind of circle with a line through it in order to remove that What we need to do is inside of our event.

  • We actually need to take our event object and we need to just call prevent default, because by default, dropping inside of an element is disabled.

  • So in order to enable dropping, we need to say, e dot prevent default.

  • And this is going to change our cursor tohave a curse that says we're able to drop inside of here.

  • As you can see, when we're outside, we get the do not allow cursor, and when we're inside, we get this drop is allowed cursor.

  • So now, with that, taking care of our next step is to determine the order of our elements based on where our mouse position is, instead of just determining what container were in, we need to figure out which element were actually placing this in between whether it's in between three and four above, three below four inside this container and so on.

  • So it's just create a simple function.

  • And inside of this function, we're gonna call it, get drag after element, and this is going to take in our container as well.

  • Was the Y position of our mouse?

  • So what this function is going to do?

  • It's going to determine our mouse position when we're dragging our element and it's going to return which ever element are mouse position is directly after.

  • So in this case, when we're dragging our one, you can see our mouse is right above number four.

  • So this get drag after would return this fourth element.

  • So we know to insert above number four farmhouses up here will return number three.

  • Since we're closest to number three and right above it.

  • And if we're for some reason below all of our elements, it would return nothing because it just knows we need to upend to the end of our container.

  • So what's actually right out this function and the first thing we need to do is determine all of the elements inside of the container that we're currently hovering over, which is this container we passed in.

  • So we can just come in here and say container dot queries selector all.

  • And we want to get all of our drag a ble elements so we could determine where we're gonna place this in our list.

  • But one problem with this is when we're hovering this one over top of this, you can see we have elements three and four, but also the element we're dragging number one is also in this container, so we want to ignore everything that we're currently dragging.

  • So to do that, we could just use the not selector and just say dot dragging, which is the current element.

  • We're dragon.

  • So this will get every drag a ble that we're not currently dragging.

  • So essentially, if we're dragging element one, it'll only get element three and four and not the one that we're dragging.

  • And now that we have this information, we want to convert this to an array so that we can actually do array operations on it because query selector all doesn't return in array.

  • So ordered it to you that we can just use the spread operator to spread this out into a new array.

  • And with this we can just set this to a very but which we're just gonna call drag a ble elements just like that.

  • So this is all of our Dragonball elements inside of our container.

  • And now we want to call a function on dragon Ball elements called Reduce.

  • And what reduces going to do is essentially going toe loop through this element list of drag both elements, and we're going to determine which single element is the one that is directly after our mouse cursor.

  • Based on this, a Y position that we pass in and we can get this by position from our event.

  • So, actually, let's just say constant after element up here, which is going to be the return of this get drag after element, we're gonna set that equal to calling that function passing in our current container and then the e dot client.

  • Why, this is just going to be the wife position of our mouse on the screen Now this reduced function.

  • If you're not familiar with it, I have a video covering it, which you confined in the cards in the description down below, but essentially this is going to take a function, and then it is also going to take a second parameter, which is essentially the initial value of our reduce.

  • So this function is going to take in two parameters.

  • The first parameter is going to be the value were reducing down, too.

  • So we're gonna call this closest because this is gonna be the element that were closest to that is directly after our mouse cursor.

  • And then the next perimeter is going to be each one of these Dragon ball elements will just call this child because each one of them are a child of the container were inside of So for each one of our dragon elements, dysfunction is going to be called.

  • And whatever this function returns is what is this closest section inside of this function?

  • And then this second parameter of reduced is just the initial value of closest.

  • So what we want to figure out inside of this function is which element is directly after our mouse cursor.

  • So to keep track of that, we need to figure out the offset between our cursor and the element that comes directly after it as well as the element that's directly after it.

  • So initially, we just wanna have a value which hasn't offset, which is going to be a really, really large number.

  • We want it to be essentially infinitely far away from our mouse cursor were.

  • So we'll say number not infinite.

  • And we can do positive infinity here so numbered out positive.

  • Infinity essentially is going to be the largest number possible.

  • So every single number is gonna be smaller than that.

  • And this is just so that initially we have a number that is way too large, and every single other element in the list is going to be closer than this number.

  • Not positive Infinity.

  • Now inside of this function, we need to determine the actual position of the elements on our screen in relation to our mouse so we can get what's called the bounding box by just calling here child dot Get bounding client wrecked, which is a function, and this is going to give us a rectangle for a box.

  • And let's just logged this out real quick so we can say council dot log box, just to see exactly what's going on inside of this function.

  • And if we come over here, inspect our page, go to the council and we drag one of these elements.

  • You'll notice nothing's actually being logged out, which means we probably have something wrong in our code.

  • So we go over here and check our code.

  • We can just see we got dragged herbal elements, getting that from our query selector, and you notice I forgot to put a period here for our class selector for Dragon Ball.

  • So when I add that in what's again Inspector page over our counsel And if we drag this you now see, we're getting a bunch of things printed out these air, the rectangles of our Children.

  • We have the exposition, the white position as well as with height and in the top, right bottom and left hand position.

  • So right and left are gonna be X and top and bottom are going to be in Why so for our use case, we essentially want to measure from the middle of our box.

  • So to do that, we can just take the top and we could subtract out half of the height of our box, and that's going to give us the dead center of our box.

  • So let's start doing that now.

  • So we have our box.

  • The next thing we want to do is get the offset.

  • This is essentially going to be the distance between the center of our box and our actual mouse cursor.

  • So we can say that are offset here is going to be equal to our Y position, which is our mouse y position.

  • And we want to subtract our box dot top.

  • So this is the top of our box.

  • And then, since we want the middle of our box, we again need to subtract out our box dot height and we need to divide that by two.

  • So half the height of our box will put us in the dead center of each one of our boxes.

  • And now, if we print out this offset and then just come over here will inspect our page, make sure that we go to our council and then inside a here.

  • If we drag number two, you can see that when we're above our elements, we get negative numbers.

  • When we're below an element, we get a positive number, which is why we have one positive and one negative number and we were below all of our elements.

  • You can see every number is positive.

  • So essentially, when we're below one element, our numbers are positive when we're above and element our numbers are negative.

  • So we only care about offsets that air negative because that means that we're currently hovering above that element.

  • So it's close out of this, and we know for a fact we only want to be concerned with offsets that are less than zero.

  • Essentially, we're above the element that we're hovering over.

  • Because if the offset is positive, then that means that we're no longer hovering over that element.

  • And we're now below that element.

  • So now we know we only want offsets that are less than zero.

  • But we also want the offset that is the closest zero.