WEBVTT 00:00:07.370 --> 00:00:07.820 All right. 00:00:07.830 --> 00:00:13.170 So now we create a list inside the Apple. 00:00:13.170 --> 00:00:22.470 They have a list of elements and we want to be able to drag those elements inside the Drupal elements 00:00:22.490 --> 00:00:22.960 . 00:00:23.380 --> 00:00:27.460 And we want to see them being added to the elements. 00:00:27.910 --> 00:00:28.580 OK. 00:00:28.800 --> 00:00:33.420 So let's go for that so let's go to the apple live and just change the contents to a list of elements 00:00:33.520 --> 00:00:34.530 . 00:00:35.560 --> 00:00:41.190 So rather than having a paragraph we're going to have another list 00:00:49.380 --> 00:00:52.170 of items. 00:00:52.410 --> 00:00:59.020 Eggs milk and bread. 00:00:59.100 --> 00:01:06.260 So now OK let's give our audience an ID. 00:01:07.860 --> 00:01:15.510 And if you go back to our excepts option you're going to be accepting the list items of our list of 00:01:15.630 --> 00:01:16.440 I.D. lists. 00:01:16.470 --> 00:01:22.850 OK so first of all we're going to select the elements of the list. 00:01:23.060 --> 00:01:23.810 OK. 00:01:23.880 --> 00:01:29.370 And we are looking at the list items because we want to be able to drag and drop these little items 00:01:29.390 --> 00:01:29.720 . 00:01:30.080 --> 00:01:30.930 OK. 00:01:31.770 --> 00:01:32.430 That's one thing 00:01:36.090 --> 00:01:40.730 we need to make sure that these items are draggle. 00:01:41.100 --> 00:01:49.530 So the way to do that is by trigona select the list using its ID. 00:01:50.880 --> 00:01:54.370 But we're not interested in the list itself we are interested in the list items. 00:01:54.390 --> 00:01:56.320 So we need to find the list items. 00:01:56.370 --> 00:01:57.960 So we're going to use the method find 00:02:00.570 --> 00:02:08.030 and the performance is going to be list item and then we can use the drug obal method. 00:02:08.060 --> 00:02:08.390 All right 00:02:11.060 --> 00:02:13.590 here's how it works. 00:02:13.590 --> 00:02:14.510 OK. 00:02:15.500 --> 00:02:19.650 So first let's make sure that these items are trackable. 00:02:20.520 --> 00:02:22.050 OK we can drag them. 00:02:22.870 --> 00:02:23.680 OK. 00:02:23.910 --> 00:02:28.210 But the thing is we don't we don't want the elements themselves to be drugged. 00:02:28.230 --> 00:02:36.080 We only want a copy of them to be drugged so we're going to use another option. 00:02:36.780 --> 00:02:40.290 It's called a helper. 00:02:40.650 --> 00:02:42.850 When are you going to be doing. 00:02:43.030 --> 00:02:48.910 We said that to clone because we want to like a clone of these elements. 00:02:49.590 --> 00:02:52.500 OK. 00:02:55.020 --> 00:02:59.510 And also we're going to say it's another option. 00:02:59.550 --> 00:03:06.660 It's going to be a bend too so we specifying which elements we appending the element to and in that 00:03:06.660 --> 00:03:09.610 case we are pointing to the body. 00:03:09.610 --> 00:03:10.710 OK. 00:03:11.880 --> 00:03:19.410 So if we try now we can see that we are drugging only a clone of the elements. 00:03:19.410 --> 00:03:20.240 OK. 00:03:20.370 --> 00:03:23.690 And then we are planning to the to the body we can try another element. 00:03:23.730 --> 00:03:30.900 If we open to all the paragraphs of our documents so we will see that once we drug them we're appending 00:03:30.900 --> 00:03:35.740 them to all the elements of the of the programs. 00:03:35.790 --> 00:03:36.740 OK. 00:03:37.230 --> 00:03:40.150 So we append them to all the paragraphs or documents basically. 00:03:40.710 --> 00:03:41.880 OK. 00:03:42.750 --> 00:03:43.120 OK. 00:03:43.200 --> 00:03:46.370 So it's change that too. 00:03:46.530 --> 00:03:53.800 Now we're going to change the function we set for the drop option inside the drop. 00:03:54.000 --> 00:03:58.110 We're going to keep the state machine in the background color but we're going to compete for now. 00:03:58.170 --> 00:04:03.910 And basically lately we're on the new function is going to have a couple of parameters. 00:04:04.080 --> 00:04:11.310 So these images are events and these are a couple of objects that we're going to be using for this function 00:04:11.330 --> 00:04:11.560 . 00:04:11.730 --> 00:04:15.310 So we'll see how are we going to be using them later. 00:04:15.390 --> 00:04:21.420 So I'm going to pace the statements changing the background color. 00:04:22.130 --> 00:04:23.620 OK. 00:04:23.700 --> 00:04:34.950 And now as we say it we want to drag the elements you know the list items and add them to the div contents 00:04:34.950 --> 00:04:35.780 . 00:04:35.820 --> 00:04:39.960 So first we want to get rid of this paragraph. 00:04:40.100 --> 00:04:40.850 OK. 00:04:41.010 --> 00:04:47.760 So you're going to be it going to select the drop will using the key word this and we're going to find 00:04:48.660 --> 00:05:00.950 all the paragraph's and then we will remove them using the Remove method pacifistic and then we want 00:05:00.950 --> 00:05:09.770 to append those elements those were drugging to the contents of the day. 00:05:10.640 --> 00:05:19.020 OK so one way of doing that is by getting the texts of the elements. 00:05:19.400 --> 00:05:20.410 OK. 00:05:21.530 --> 00:05:32.580 And then putzing that's texts within ASML tags and then appending the code to the elements. 00:05:33.230 --> 00:05:41.860 So let's try for example let's try to put the text of these elements inside paragraph tags. 00:05:42.140 --> 00:05:42.890 OK. 00:05:42.890 --> 00:05:49.190 So in order to do that we're going to select an empty paragraph. 00:05:50.370 --> 00:05:50.810 OK. 00:05:50.900 --> 00:05:54.620 So we're just going to write here 00:05:57.410 --> 00:06:03.840 a shameful code of an empty paragraph and then we're going to use the method texts. 00:06:04.550 --> 00:06:13.520 And now we're going to be accessing the text value of the draggable elements so we're going to use 00:06:13.520 --> 00:06:15.500 the UI objects. 00:06:15.770 --> 00:06:16.510 OK. 00:06:16.760 --> 00:06:27.170 So this insight is going to be UI and then trouble and then text. 00:06:27.290 --> 00:06:28.100 All right. 00:06:28.790 --> 00:06:32.990 So we are getting the text value of the draggable elements. 00:06:33.240 --> 00:06:33.780 Okay. 00:06:34.070 --> 00:06:41.570 And then we are setting the text of this empty paragraph resetting it to the value of the draggable 00:06:41.720 --> 00:06:42.050 element. 00:06:42.040 --> 00:06:48.380 So at the end of the day we're going to get a paragraph and within the paragraph we get the value of 00:06:48.470 --> 00:06:50.430 the draggable elements. 00:06:50.450 --> 00:06:59.960 So if you're an ex for instance we end up with a paragraph with text they're showing X and then finally 00:07:01.220 --> 00:07:10.050 we need to append this to our drop of drawable elements using the keyword. 00:07:10.090 --> 00:07:13.740 That's OK. 00:07:14.810 --> 00:07:18.460 OK so let's try this. 00:07:20.490 --> 00:07:20.920 OK. 00:07:21.050 --> 00:07:22.820 What happened to this. 00:07:23.170 --> 00:07:25.210 Let's try again. 00:07:25.880 --> 00:07:29.710 Now if I drop the so we can see that we are 00:07:33.880 --> 00:07:37.360 OK. 00:07:40.580 --> 00:07:44.790 OK so let's check our div. 00:07:45.830 --> 00:07:46.360 OK. 00:07:46.370 --> 00:07:50.080 Actually we don't put the text inside a paragraph. 00:07:50.390 --> 00:07:55.540 Let's do that and check what's happening. 00:07:56.540 --> 00:07:58.200 So now if we draw. 00:07:58.230 --> 00:07:59.790 And then it means OK. 00:07:59.810 --> 00:08:08.570 So now we see that we removed the original paragraph we had in the div and we appended the elements 00:08:08.960 --> 00:08:10.170 inside a paragraph. 00:08:10.440 --> 00:08:17.180 Ok but the problem is whenever we drag in elements we remove all the paragraphs inside a div So if we 00:08:17.190 --> 00:08:24.140 drag another elements now it's going to happen is we will remove all the paragraphs and this the eggs 00:08:24.670 --> 00:08:27.150 takes there is within a paragraph so it's going to be removed. 00:08:27.260 --> 00:08:27.750 OK. 00:08:28.010 --> 00:08:34.760 So if I try that's the paragraph is removed and is we of course a new paragraph appended. 00:08:34.950 --> 00:08:35.510 OK. 00:08:35.690 --> 00:08:39.770 So to avoid this issue. 00:08:39.770 --> 00:08:48.830 So rather than wrapping the elements with using p tags we can use another side we can use an ally tag 00:08:48.830 --> 00:08:51.530 for a list item for instance. 00:08:52.190 --> 00:08:53.010 OK. 00:08:53.390 --> 00:08:56.690 So let's try this. 00:08:56.690 --> 00:08:58.810 So now if we drag in elements. 00:08:58.820 --> 00:09:01.830 So first the paragraph is going to be removed. 00:09:02.120 --> 00:09:05.410 And we are going to place this item plus we are dragging. 00:09:05.450 --> 00:09:11.840 So once it's dropped it's going to be placed within a lie tags and then appended to the to the. 00:09:11.970 --> 00:09:13.570 So let's drop it. 00:09:13.800 --> 00:09:17.400 Fine so let's drag and drop another element. 00:09:17.660 --> 00:09:19.460 OK so we can see that now it is working. 00:09:19.580 --> 00:09:21.270 If we drag the other elements again. 00:09:21.440 --> 00:09:23.790 So it is working OK. 00:09:23.960 --> 00:09:26.820 All right so we have learned. 00:09:26.870 --> 00:09:33.470 In this video a little bit about the dragon ball and drawable effects. 00:09:33.470 --> 00:09:41.390 Also we went to see a little bit more advanced stuff using some functions using the event and UI objects 00:09:41.400 --> 00:09:41.840 . 00:09:42.340 --> 00:09:44.620 All right. 00:09:44.850 --> 00:09:48.050 In the next videos we recover a few more interruptions 00:09:48.060 --> 00:09:58.290 .