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.