Name: How To Build Sortable Drag & Drop With Vanilla Javascript
Uploaded: 2020-03-28T16:23:51.000Z
Duration: 22 min 22 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Adverbs of degree

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Subtitles ListPlay Video

How To Build Sortable Drag & Drop With Vanilla Javascript

entire

essentially

determine

positive