So now that we've created some random elements, I also want to make them drivable, so go on top,
click them and have the ability to move them around the screen.
So that's going to be a lot of fun and we're going to add that in.
So let's create a function.
We can call it Draga and we're going to posehn that Holder object and then using that Draga function,
this is how we're going to create dragonball elements.
So any element that we add to the function, Draga will automatically become Dragonball.
And this is going to be passing in that element object make this bigger.
So let's set up a variable so this is our default position object so we can contain some position information,
selecting the element and we're going to add on mouse down, so whatever on down, we're going to invoke
the function of drag mode.
Let's create that function.
So this is a function within that function, so drag bows and passing in that element object, let's
add in to our position.
So this is our position of our new X value.
Taking the elements, Client X. So we've got access to a whole bunch of different variables, so position
and why so this is the new element again.
So where we're going to position it, updating that client, getting the client y value.
So this is all available within the element object.
So we know where it's positioned at client X and client Y, and I'll show you all this information so
far.
And post.
And why this would be an X, I'll show you what that looks like.
So when we go on top, then we create one.
And now when we click it, you see we get these positions of wherever the most coordinates are, and
it's only when we're on top of that element.
So you can see that as a moving up.
It's decreasing.
And as I'm moving over to the right, the horizontal is increasing and so on.
So you can see that these are the positions of the current client of the current most position on top
of the element.
So we want to do is we want to only have this running while that particular while the mouse is up and
then whatever the document mouse up gets foot or mouse is down.
That's the only time we want to have this running.
And when a mouse is.
When the messes up, want to use documents?
And set on most up and equal out to know and also document.
On most move, and we call this to note as well, so we don't get any ference from any one of these
other event listeners and the only one that we want to make use of is document.
On most move, so whenever the mouse is moving that we want to move this element alongside of it.
So taking our position of our old X value, so that's the position of an X minus E, client X.
And position of old, why value, so taking the position of the.
And why minus whatever the client, wherever the mouse has moved to now.
So essentially we're tracking where the mouse has moved to and that's what's giving us these positions.
And we have to store these positions so that we know how to adjust.
And then we're also taking out those old values and we're updating these values now afterwards with
the client.
So you see, as we're subtracting that value, then we know how much it's moved, essentially.
So this is the amount of move on the x axis and the amount of movement on the Y axis.
And we get that because we're tracking the position minus the client position and then we're setting
that client position.
So we know we need to account for this movement, so let's update our element using element style.
So just as we did before, using that style property and equaling this to element of.
Set and we're going to be offsetting off the top of the elements and then updating that value with the.
Horizontal position and of course, don't forget the picks and then also for the left position, we're
going to be doing something very similar where instead of offset top, this is going to be offset left
and we're going to be using the x axis.
So we're subtracting whatever value we've come up with here.
So whatever value we're sitting on over here.
So now let's try that out so now we can drag our elements around the page.
That's lots of always lots of fun.
And as you can see, we can always drag them and we can place them anywhere we want.
We can always select them again.
So they're all selectable.
They all have that drag functionality and you can stack them and do whatever you want.
Whatever is interesting for you to do with all of these elements, and they're fully flexible, dynamic,
and you could always create more click on some of these and create some more if you need to.
So go ahead and try this out for yourself, add in the ability to drag your freshly created elements
using the same calculations that we just used, where we're getting the amount that's moved here amount
to move, and then this is the amount to move vertical.