WEBVTT

00:00:09.740 --> 00:00:15.290
In this video we're going to learn Dragonball and driveable first.

00:00:15.340 --> 00:00:19.140
We're going to start with the Facebook Dave and we're going to make its drag Well like we did in the

00:00:19.140 --> 00:00:20.070
previous video.

00:00:20.370 --> 00:00:29.630
If you remember all we did was to select the elements using its ID and then we used a method.

00:00:29.640 --> 00:00:32.590
So this method if you remember it was.

00:00:33.640 --> 00:00:40.380
And now if we save and we refresh the page we can see that the Facebook div is drinkable.

00:00:40.680 --> 00:00:44.990
OK let's do the same thing for the Apple dev.

00:00:46.240 --> 00:00:48.730
OK let's make sure it's working.

00:00:49.290 --> 00:00:50.290
Yes.

00:00:50.400 --> 00:00:56.080
Now we want to be able to drag the Apple div, but only following one axis.

00:00:56.210 --> 00:01:01.260
When a drug is following the y axis only not following the x axis.

00:01:01.290 --> 00:01:06.210
So in this case we are going to use an option inside the method.

00:01:06.210 --> 00:01:12.150
First of all to use an option we need curly brackets and then inside the curly brackets we're going

00:01:12.150 --> 00:01:14.850
to tell the name of the option.

00:01:14.910 --> 00:01:19.090
In our case it's going to be Xs and we are in it too.

00:01:19.110 --> 00:01:20.280
Why.

00:01:21.030 --> 00:01:21.810
All right.

00:01:22.050 --> 00:01:23.730
So let's try.

00:01:24.780 --> 00:01:29.010
You can see now the apple of this drug will only following the y axis.

00:01:29.010 --> 00:01:30.030
OK.

00:01:30.360 --> 00:01:31.440
All right.

00:01:31.440 --> 00:01:34.240
Now we're going to move to the Microsoft Dave.

00:01:34.920 --> 00:01:40.260
First of all let's make it draggle using its ID.

00:01:40.440 --> 00:01:40.720
OK

00:01:45.330 --> 00:01:46.300
OK.

00:01:46.650 --> 00:01:48.240
Let's make sure it's working.

00:01:48.810 --> 00:01:56.100
Now we want to be able to drag the elements and also when we drop it we want it to revert to its original

00:01:56.100 --> 00:01:57.570
place.

00:01:57.570 --> 00:02:01.950
So you might guess the option we need to use in this case.

00:02:02.070 --> 00:02:06.860
First of all we need curly brackets and we need to use an option.

00:02:06.870 --> 00:02:09.200
It's called Rivette.

00:02:09.990 --> 00:02:10.930
OK.

00:02:11.220 --> 00:02:14.430
And we need to set it to true.

00:02:16.230 --> 00:02:17.470
So let's try now.

00:02:18.030 --> 00:02:23.870
It's working so if we drag the elements anywhere it just goes back to where it was.

00:02:24.000 --> 00:02:25.690
All right.

00:02:26.250 --> 00:02:29.430
Now we're going to go to some advanced stuff.

00:02:29.550 --> 00:02:37.870
So we want to execute a piece of code once we starts the drugging.

00:02:38.460 --> 00:02:39.930
OK.

00:02:41.130 --> 00:02:47.640
And also while we were dragging the elements one to be executing another piece of code.

00:02:47.860 --> 00:02:52.640
And also when we stop we drop the elements one excuse.

00:02:52.650 --> 00:02:54.120
Another piece of good.

00:02:54.750 --> 00:02:56.450
So how are we going to do that.

00:02:56.760 --> 00:02:59.340
So there are options we need to use here.

00:02:59.370 --> 00:03:04.260
The first one is going to be starts.

00:03:04.280 --> 00:03:07.030
So first to separate the options we need a comma.

00:03:07.320 --> 00:03:08.440
OK.

00:03:09.180 --> 00:03:17.130
So next one is stands and we need to define a function.

00:03:17.470 --> 00:03:19.040
OK.

00:03:19.950 --> 00:03:29.970
So in this case let's say once we start the drugging of the elements we just want.

00:03:30.180 --> 00:03:34.380
So once we start dragging the Microsoft's Dave we want the Facebook Dave to change is its background

00:03:34.380 --> 00:03:35.820
color for example.

00:03:35.820 --> 00:03:36.280
OK.

00:03:36.600 --> 00:03:44.700
So this just selects the Microsoft Steve using its ID and change its background color using this method

00:03:44.740 --> 00:03:49.770
.

00:03:55.190 --> 00:04:00.180
OK and lets go for sets and color.

00:04:00.530 --> 00:04:02.150
Go something like this.

00:04:02.650 --> 00:04:03.700
OK.

00:04:04.210 --> 00:04:06.960
So you can try that and make sure it is working so well.

00:04:07.050 --> 00:04:12.680
Once we saw the dragging action we can see that the color of Facebook changes.

00:04:12.720 --> 00:04:17.940
OK so the next option is dreich.

00:04:19.540 --> 00:04:19.840
OK

00:04:29.970 --> 00:04:35.580
well before we do that we need to separate the options using the comma as we say.

00:04:35.970 --> 00:04:42.670
So a comma at the end the end of the option.

00:04:42.780 --> 00:04:52.380
So now when we are dragging the Microsoft Stiv we want to change the color of the background color of

00:04:52.380 --> 00:04:56.390
the Microsoft itself to a random color.

00:04:56.730 --> 00:04:57.480
OK.

00:04:57.780 --> 00:05:06.900
So first we're defining a function and we'll put the code inside the credit brackets.

00:05:06.960 --> 00:05:12.880
So we're going to be selecting the Microsoft did using its ID.

00:05:14.480 --> 00:05:17.300
OK.

00:05:19.620 --> 00:05:25.580
And then we can use this as his method.

00:05:32.060 --> 00:05:39.500
OK and we are looking at the background color to be changed to a random color so before we go for a

00:05:39.500 --> 00:05:47.250
random color let's just go for a specific color to make sure our code is working.

00:05:47.630 --> 00:05:49.510
And then we can move to to something else.

00:05:49.680 --> 00:05:52.330
OK.

00:05:54.980 --> 00:05:55.240
OK.

00:05:55.250 --> 00:05:58.820
So it is working at the scene of the color of Microsoft has changed.

00:05:58.880 --> 00:06:07.830
And now to go for a random color we'll just use the same code we used earlier when we would do it selects

00:06:07.830 --> 00:06:09.610
a symbol elements.

00:06:10.100 --> 00:06:12.080
OK let's refresh our live preview

00:06:17.730 --> 00:06:24.330
was it was in change a shameful styling.

00:06:25.130 --> 00:06:29.940
And we did this with the apple when we were children randomly the color of Apple.

00:06:30.330 --> 00:06:33.340
And we used the G-B function.

00:06:33.730 --> 00:06:34.830
OK.

00:06:35.700 --> 00:06:37.800
This copy of this piece of good

00:06:41.000 --> 00:06:42.620
to save something.

00:06:42.970 --> 00:06:43.350
OK

00:06:45.510 --> 00:06:47.830
.

00:06:48.680 --> 00:06:55.980
OK let's make sure this is working so if we drag the end of it now we can see that every time we move

00:06:56.100 --> 00:06:58.840
the elements the color changes.

00:06:58.980 --> 00:06:59.710
All right.

00:06:59.940 --> 00:07:00.530
OK.

00:07:00.940 --> 00:07:01.160
OK.

00:07:01.170 --> 00:07:04.070
And now finally we're going to add another option.

00:07:04.080 --> 00:07:12.080
So this one is going to be the stock option.

00:07:12.500 --> 00:07:14.010
OK.

00:07:14.120 --> 00:07:15.650
And all we need to do here.

00:07:15.690 --> 00:07:25.260
We're going to find another function and let's say for example we want the background color of the Apple

00:07:25.620 --> 00:07:26.130
to change

00:07:30.410 --> 00:07:33.380
its selects the apple using its ID.

00:07:33.780 --> 00:07:40.240
And let's use the CSSA method.

00:07:40.680 --> 00:07:42.350
Do you know the background color

00:07:47.800 --> 00:07:56.040
and set it to something this.

00:07:56.690 --> 00:07:58.580
OK so let's try this now.

00:07:58.590 --> 00:08:01.600
So when we start we can see the Facebook they've changed.

00:08:01.880 --> 00:08:08.560
And once we drop it we can see that the Apple they've changed the background color changed.

00:08:08.730 --> 00:08:09.760
OK.

00:08:10.200 --> 00:08:19.890
We can add something else we can change the contents of the Microsoft Steve when we are dragging the

00:08:19.880 --> 00:08:20.840
elements.

00:08:21.300 --> 00:08:32.370
So for example let's have a list of strings that we can show once the microwave is being dragged around

00:08:32.380 --> 00:08:33.270
.

00:08:34.130 --> 00:08:35.900
OK.

00:08:36.990 --> 00:08:38.370
So what are you to do.

00:08:38.900 --> 00:08:47.670
We're going to have an array of potential messages plus the DV is going to show in each of the paragraphs

00:08:47.690 --> 00:08:48.130
.

00:08:48.500 --> 00:08:49.290
OK.

00:08:49.290 --> 00:08:57.760
So for example if we had only one message we want both the paragraphs to change that message.

00:08:58.250 --> 00:09:02.430
OK so for example you want to show the message drop me on both paragraphs.

00:09:02.460 --> 00:09:05.740
It's going to show it took me here and dropped me there.

00:09:05.820 --> 00:09:13.080
OK but now what we want to do we want to change this as we are dragging the elements so we want to show

00:09:13.080 --> 00:09:18.060
one message for example dropped me and then another message come on and then another message.

00:09:18.100 --> 00:09:19.790
Leave me alone or something like that.

00:09:20.220 --> 00:09:22.290
So first of all we're going to define an array

00:09:25.010 --> 00:09:26.480
of strings.

00:09:27.050 --> 00:09:29.230
We're going to call its message.

00:09:30.410 --> 00:09:34.520
OK.

00:09:34.520 --> 00:09:34.970
So

00:09:39.020 --> 00:09:43.930
for example the first string could be please.

00:09:44.250 --> 00:09:46.110
Next one could be.

00:09:46.110 --> 00:09:49.100
Leave me alone.

00:09:50.120 --> 00:09:51.980
Next one.

00:09:51.990 --> 00:09:54.110
Drop me.

00:09:55.360 --> 00:09:56.100
OK.

00:09:56.130 --> 00:09:57.670
And next one.

00:09:57.680 --> 00:09:59.180
Come on.

00:10:00.300 --> 00:10:01.650
OK.

00:10:01.640 --> 00:10:08.120
And while we're dragging the elements we have seen that we will change the background color to random

00:10:08.550 --> 00:10:09.110
color.

00:10:09.410 --> 00:10:10.970
OK.

00:10:11.130 --> 00:10:18.840
Well we want to do something else we want to change all the B elements inside a div to one of these

00:10:19.250 --> 00:10:20.060
strings.

00:10:20.310 --> 00:10:21.000
OK.

00:10:21.170 --> 00:10:24.910
So we're going to do it first of all we need to select the Microsoft did.

00:10:25.590 --> 00:10:25.880
All right

00:10:31.470 --> 00:10:37.260
using its ID and then we need to find the key elements inside the microwave.

00:10:37.680 --> 00:10:46.970
So we're going to use a function it's called it's find and we are looking for B elements.

00:10:47.130 --> 00:10:52.290
And once we find those elements each one of them we're going to change the email using the same old

00:10:52.290 --> 00:10:53.600
method.

00:10:53.700 --> 00:11:05.220
All right and now we can let's say we want to see it change the shemale of the paragraph to one specific

00:11:05.340 --> 00:11:05.880
item.

00:11:05.880 --> 00:11:14.450
Now let's say one of the one the first item which is going to go message item index 0.

00:11:15.590 --> 00:11:16.080
OK.

00:11:16.120 --> 00:11:22.180
Now if we try that oh we just forgot the number sign there.

00:11:22.560 --> 00:11:26.640
Let's try again so we can see that's both paragraphs.

00:11:26.640 --> 00:11:29.230
They change to the string that we selected.

00:11:29.230 --> 00:11:38.620
Now we want to go for a random number between 0 and 3 so it's going to be either 0 1 2 or 3.

00:11:38.650 --> 00:11:40.270
Ok so we have done this.

00:11:40.320 --> 00:11:41.390
We have done this before.

00:11:41.520 --> 00:11:46.420
So we're going to use the most random method and then we're going to multiply by four.

00:11:46.760 --> 00:11:47.380
OK.

00:11:47.730 --> 00:11:48.430
So let's go for that.

00:11:48.430 --> 00:11:55.970
So so rather than having a specific number we're going to use math not random.

00:11:56.040 --> 00:11:58.590
So now we get a number between 0 and 1.

00:11:58.710 --> 00:12:04.000
So we're going to multiply by four so that we can get something between 0 and 4.

00:12:04.020 --> 00:12:13.230
So multiply by four and then we get to select all this and put it inside another method because we want

00:12:13.320 --> 00:12:14.340
a round number.

00:12:14.460 --> 00:12:17.220
So we're going to use the floor math floor method.

00:12:17.220 --> 00:12:26.480
So we copy that and use the math dot floor method that puts a piece of code.

00:12:26.490 --> 00:12:29.130
So let's join now and see if it works.

00:12:29.730 --> 00:12:30.570
Yes it's working.

00:12:30.650 --> 00:12:34.940
So you can see no that's as we are dragging the elements.

00:12:34.940 --> 00:12:37.330
You can see all those messages being shown.

00:12:37.500 --> 00:12:39.160
OK.

00:12:40.050 --> 00:12:43.030
OK let's add one final bit.

00:12:43.410 --> 00:12:49.470
So let's say once we drop the elements we change the contents of the div to only one paragraph saying

00:12:49.470 --> 00:12:50.270
for example.

00:12:50.310 --> 00:12:59.280
Finally OK so we're going to go to the top option and we're going to add another statements.

00:12:59.370 --> 00:13:04.150
We're going to be accessing the micro's of Steve using its ID.

00:13:05.040 --> 00:13:10.210
And this time will just change the symbol of the Microsoft Steve.

00:13:10.890 --> 00:13:13.850
OK.

00:13:15.850 --> 00:13:24.020
OK let's change a symbol to a paragraph saying for example.

00:13:24.090 --> 00:13:24.540
Finally

00:13:27.280 --> 00:13:30.510
let's try.

00:13:30.510 --> 00:13:34.000
So now we are dragging the elements so the color changes randomly.

00:13:34.020 --> 00:13:38.110
Also we're showing some text in both paragraphs.

00:13:38.160 --> 00:13:42.690
If we drop the elements now the content change only one paragraph.

00:13:42.690 --> 00:13:48.840
If we druggist's again now we have only one paragraph inside changing the contents of only one paragraph

00:13:48.840 --> 00:13:49.570
.

00:13:49.650 --> 00:13:50.620
All right.

00:13:51.360 --> 00:13:52.190
Great.

00:13:52.680 --> 00:13:54.440
OK.

00:13:55.230 --> 00:13:59.520
Now we going to move to something else we're going to move to drop a little.

00:13:59.760 --> 00:14:06.960
So an amendment would be a draftable if you are able to drag another element and drop it inside that

00:14:07.110 --> 00:14:08.390
elements.

00:14:08.680 --> 00:14:16.310
All right so let's create another div following the Microsoft Steve.

00:14:17.130 --> 00:14:17.420
OK

00:14:19.780 --> 00:14:23.080
.

00:14:25.510 --> 00:14:31.920
This gives an ID drag a ball drop will

00:14:34.800 --> 00:14:39.120
looks like already included the styling of these elements.

00:14:39.120 --> 00:14:45.660
So we just have now a background color height and width for four that's drivable elements.

00:14:45.660 --> 00:14:46.630
OK.

00:14:47.370 --> 00:14:50.220
And also we're just going to add another

00:14:52.710 --> 00:14:56.070
plus to the elements.

00:14:57.540 --> 00:14:57.960
OK

00:14:57.960 --> 00:15:04.460
.

00:15:04.460 --> 00:15:14.610
It's going to be similar to the other device is going to the corner all so that we can have all the

00:15:14.610 --> 00:15:15.560
corners around it.

00:15:15.690 --> 00:15:22.220
Let's have some margin top 20 pixels for example.

00:15:22.810 --> 00:15:25.380
OK so let's add some text.

00:15:25.410 --> 00:15:26.010
You can

00:15:30.390 --> 00:15:36.050
drop elements or drop things here.

00:15:37.320 --> 00:15:38.960
OK.

00:15:38.960 --> 00:15:46.140
And let's change the color change the color to white.

00:15:46.240 --> 00:15:48.500
That looks amazing.

00:15:48.510 --> 00:15:53.550
So what we're trying to do trying to make these elements and drop them all so seamless we have done

00:15:53.550 --> 00:15:58.340
before the function is you can guess what method you're going to be using.

00:15:58.590 --> 00:16:07.900
So first this selects the elements using its id drop will and the method is going to be dropped.

00:16:09.850 --> 00:16:11.720
OK.

00:16:12.600 --> 00:16:20.190
So basically if we refresh the page and if we select the Facebook div we can actually drop it's there

00:16:20.210 --> 00:16:20.360
.

00:16:20.490 --> 00:16:22.470
OK.

00:16:22.480 --> 00:16:28.380
The Microsoft Steve can be actually drops but it's reverts to its original position.

00:16:28.380 --> 00:16:34.340
But we can see that all the other elements they can be just dropped there.

00:16:34.380 --> 00:16:39.540
Now we going to add some properties to the dribble method so we can

00:16:42.870 --> 00:16:47.610
specify which elements can be dropped.

00:16:47.670 --> 00:16:58.650
The option we need to use there is going to be accepts and we can specify which elements can be dropped

00:16:59.130 --> 00:17:05.040
before we go forth for that's let's just specify what happens when we drop an atom and just make sure

00:17:05.100 --> 00:17:06.960
we know whether it's had dropped or not.

00:17:06.960 --> 00:17:10.300
So the option here is going to be dropped.

00:17:10.710 --> 00:17:11.340
OK.

00:17:11.430 --> 00:17:13.840
And we need to specify a function.

00:17:13.920 --> 00:17:16.620
So let's go for an easy function.

00:17:16.620 --> 00:17:19.680
So each is going to say for example

00:17:24.020 --> 00:17:26.850
once an element is drops.

00:17:26.910 --> 00:17:29.520
Could you specify so we can select

00:17:32.140 --> 00:17:43.500
the same consulate selects the durable elements using the keyword this way and we can just change its

00:17:43.500 --> 00:17:50.630
background color using this VSS method.

00:17:53.160 --> 00:17:53.700
OK.

00:17:53.760 --> 00:17:57.710
And let's go for a color example.

00:17:57.760 --> 00:17:59.190
That's right.

00:18:00.230 --> 00:18:01.140
OK.

00:18:01.680 --> 00:18:07.860
So if we take for instance the Facebook and we get the we can see that's the background color of the

00:18:08.170 --> 00:18:10.180
drivable elements has changed.

00:18:10.650 --> 00:18:11.780
OK.

00:18:11.880 --> 00:18:18.310
Now we can add another option specifying which elements we accept.

00:18:18.450 --> 00:18:23.290
So let's say we only accepts the Facebook div to be dropped.

00:18:23.950 --> 00:18:24.490
OK.

00:18:24.630 --> 00:18:30.160
So basically we need the accept option and we going to specify the Facebook div using its ID.

00:18:30.270 --> 00:18:35.390
So we need to have a comma and then have the new option which is except.

00:18:35.580 --> 00:18:39.670
OK so now let's see.

00:18:39.670 --> 00:18:40.880
So let's try the Apple.

00:18:41.310 --> 00:18:42.480
So we can all drop it.

00:18:42.480 --> 00:18:44.320
We can see any effects there.

00:18:44.820 --> 00:18:53.160
If we try the micro div we can drop it either by if we try the Facebook if we can drop it and we can

00:18:53.160 --> 00:18:54.560
see the effects happening.

00:18:54.660 --> 00:18:59.700
OK.