1
00:00:00,550 --> 00:00:06,700
So now that we've created some random elements, I also want to make them drivable, so go on top,

2
00:00:06,700 --> 00:00:10,350
click them and have the ability to move them around the screen.

3
00:00:10,780 --> 00:00:13,900
So that's going to be a lot of fun and we're going to add that in.

4
00:00:14,440 --> 00:00:16,270
So let's create a function.

5
00:00:16,270 --> 00:00:23,430
We can call it Draga and we're going to posehn that Holder object and then using that Draga function,

6
00:00:23,590 --> 00:00:26,020
this is how we're going to create dragonball elements.

7
00:00:26,260 --> 00:00:32,530
So any element that we add to the function, Draga will automatically become Dragonball.

8
00:00:32,710 --> 00:00:38,110
And this is going to be passing in that element object make this bigger.

9
00:00:39,730 --> 00:00:46,300
So let's set up a variable so this is our default position object so we can contain some position information,

10
00:00:47,020 --> 00:00:55,600
selecting the element and we're going to add on mouse down, so whatever on down, we're going to invoke

11
00:00:55,600 --> 00:00:57,640
the function of drag mode.

12
00:00:58,800 --> 00:00:59,860
Let's create that function.

13
00:00:59,880 --> 00:01:08,580
So this is a function within that function, so drag bows and passing in that element object, let's

14
00:01:08,820 --> 00:01:10,750
add in to our position.

15
00:01:11,040 --> 00:01:16,260
So this is our position of our new X value.

16
00:01:17,730 --> 00:01:25,800
Taking the elements, Client X. So we've got access to a whole bunch of different variables, so position

17
00:01:25,800 --> 00:01:28,530
and why so this is the new element again.

18
00:01:28,540 --> 00:01:33,880
So where we're going to position it, updating that client, getting the client y value.

19
00:01:34,230 --> 00:01:36,930
So this is all available within the element object.

20
00:01:37,410 --> 00:01:42,920
So we know where it's positioned at client X and client Y, and I'll show you all this information so

21
00:01:43,050 --> 00:01:43,500
far.

22
00:01:44,560 --> 00:01:46,110
And post.

23
00:01:46,950 --> 00:01:52,940
And why this would be an X, I'll show you what that looks like.

24
00:01:53,010 --> 00:01:55,610
So when we go on top, then we create one.

25
00:01:56,160 --> 00:02:02,820
And now when we click it, you see we get these positions of wherever the most coordinates are, and

26
00:02:02,820 --> 00:02:04,440
it's only when we're on top of that element.

27
00:02:04,800 --> 00:02:07,140
So you can see that as a moving up.

28
00:02:07,140 --> 00:02:08,100
It's decreasing.

29
00:02:08,100 --> 00:02:13,550
And as I'm moving over to the right, the horizontal is increasing and so on.

30
00:02:14,010 --> 00:02:20,850
So you can see that these are the positions of the current client of the current most position on top

31
00:02:20,850 --> 00:02:21,480
of the element.

32
00:02:22,800 --> 00:02:33,720
So we want to do is we want to only have this running while that particular while the mouse is up and

33
00:02:33,720 --> 00:02:38,910
then whatever the document mouse up gets foot or mouse is down.

34
00:02:38,910 --> 00:02:40,640
That's the only time we want to have this running.

35
00:02:41,160 --> 00:02:43,140
And when a mouse is.

36
00:02:45,670 --> 00:02:49,360
When the messes up, want to use documents?

37
00:02:51,020 --> 00:02:58,070
And set on most up and equal out to know and also document.

38
00:02:59,930 --> 00:03:06,770
On most move, and we call this to note as well, so we don't get any ference from any one of these

39
00:03:06,770 --> 00:03:11,930
other event listeners and the only one that we want to make use of is document.

40
00:03:13,280 --> 00:03:20,790
On most move, so whenever the mouse is moving that we want to move this element alongside of it.

41
00:03:21,620 --> 00:03:34,310
So taking our position of our old X value, so that's the position of an X minus E, client X.

42
00:03:35,980 --> 00:03:41,320
And position of old, why value, so taking the position of the.

43
00:03:42,850 --> 00:03:49,390
And why minus whatever the client, wherever the mouse has moved to now.

44
00:03:49,600 --> 00:03:54,550
So essentially we're tracking where the mouse has moved to and that's what's giving us these positions.

45
00:03:54,550 --> 00:03:58,240
And we have to store these positions so that we know how to adjust.

46
00:03:58,960 --> 00:04:06,580
And then we're also taking out those old values and we're updating these values now afterwards with

47
00:04:06,580 --> 00:04:07,030
the client.

48
00:04:07,780 --> 00:04:13,840
So you see, as we're subtracting that value, then we know how much it's moved, essentially.

49
00:04:14,050 --> 00:04:20,110
So this is the amount of move on the x axis and the amount of movement on the Y axis.

50
00:04:20,350 --> 00:04:25,810
And we get that because we're tracking the position minus the client position and then we're setting

51
00:04:25,810 --> 00:04:26,830
that client position.

52
00:04:28,150 --> 00:04:35,980
So we know we need to account for this movement, so let's update our element using element style.

53
00:04:36,190 --> 00:04:42,310
So just as we did before, using that style property and equaling this to element of.

54
00:04:43,330 --> 00:04:52,590
Set and we're going to be offsetting off the top of the elements and then updating that value with the.

55
00:04:53,750 --> 00:04:59,930
Horizontal position and of course, don't forget the picks and then also for the left position, we're

56
00:04:59,930 --> 00:05:06,770
going to be doing something very similar where instead of offset top, this is going to be offset left

57
00:05:07,010 --> 00:05:09,050
and we're going to be using the x axis.

58
00:05:09,410 --> 00:05:13,330
So we're subtracting whatever value we've come up with here.

59
00:05:13,340 --> 00:05:15,200
So whatever value we're sitting on over here.

60
00:05:15,620 --> 00:05:21,660
So now let's try that out so now we can drag our elements around the page.

61
00:05:21,680 --> 00:05:23,510
That's lots of always lots of fun.

62
00:05:24,560 --> 00:05:29,420
And as you can see, we can always drag them and we can place them anywhere we want.

63
00:05:29,540 --> 00:05:31,030
We can always select them again.

64
00:05:31,220 --> 00:05:32,540
So they're all selectable.

65
00:05:32,540 --> 00:05:38,030
They all have that drag functionality and you can stack them and do whatever you want.

66
00:05:38,060 --> 00:05:43,820
Whatever is interesting for you to do with all of these elements, and they're fully flexible, dynamic,

67
00:05:43,940 --> 00:05:49,130
and you could always create more click on some of these and create some more if you need to.

68
00:05:50,280 --> 00:05:56,310
So go ahead and try this out for yourself, add in the ability to drag your freshly created elements

69
00:05:56,700 --> 00:06:05,520
using the same calculations that we just used, where we're getting the amount that's moved here amount

70
00:06:05,700 --> 00:06:10,770
to move, and then this is the amount to move vertical.