WEBVTT 00:00:06.860 --> 00:00:11.810 In this video we're going to learn how to use a query to reorder elements in a list. 00:00:11.810 --> 00:00:12.520 All great. 00:00:12.540 --> 00:00:16.160 We're going to use the same source code as in the previous file. 00:00:16.470 --> 00:00:24.650 So we already have our list of elements so we'd like to do we want to be able to reorder these lists 00:00:24.720 --> 00:00:26.390 items as we like. 00:00:26.940 --> 00:00:36.780 So we're going to write a simple statements so we can access the lists using its ID the list IDs list 00:00:37.440 --> 00:00:43.110 and then we're going to use a method it's called sortable. 00:00:44.300 --> 00:00:48.000 At the moment you not using any options inside the method. 00:00:48.050 --> 00:00:52.110 Well let's let's see how it works so we can see how it's working. 00:00:52.380 --> 00:00:54.910 We can rearrange the items as we like. 00:00:55.020 --> 00:00:55.920 OK. 00:00:56.580 --> 00:00:57.200 All right. 00:00:57.270 --> 00:01:00.900 There are a few options for the sortable method that we can use. 00:01:00.990 --> 00:01:05.760 First let's say we would like to see a placeholder. 00:01:05.790 --> 00:01:11.520 So when we are arranging the elements so if I drag the mysterious elements we know that it's going to 00:01:11.520 --> 00:01:19.230 be going at the top but we would like to see a placeholder for the item before it gets drops. 00:01:19.620 --> 00:01:24.060 So the option to use their first let's have some curly brackets. 00:01:24.930 --> 00:01:28.920 So we need an option called placeholder. 00:01:29.160 --> 00:01:30.470 Remember that's all the options. 00:01:30.480 --> 00:01:32.500 They go inside the credit brackets. 00:01:32.580 --> 00:01:34.970 So option called on. 00:01:35.090 --> 00:01:39.580 And then we need to specify the style of the placeholder. 00:01:39.870 --> 00:01:43.640 OK let's go for a you state. 00:01:44.490 --> 00:01:49.380 Highlights for example. 00:01:49.380 --> 00:01:51.270 So let's refresh the page. 00:01:51.330 --> 00:01:58.440 So now we can see that we can see a placeholder there and we can also see that the style is exactly 00:01:58.440 --> 00:02:00.150 what we choose. 00:02:00.150 --> 00:02:03.290 We can change that to your state era instance 00:02:05.900 --> 00:02:10.170 and we can see that the style is changed. 00:02:10.450 --> 00:02:12.750 OK let's keep it highlights one. 00:02:13.100 --> 00:02:14.040 OK. 00:02:14.770 --> 00:02:23.750 Now there are some occasions where we would need one specific item to be not sortable. 00:02:24.000 --> 00:02:30.480 So for instance you might want the last item to be not sortable which means that we can reorder everything 00:02:30.480 --> 00:02:33.600 else except for these elements. 00:02:33.750 --> 00:02:35.180 So there is another option for that. 00:02:35.220 --> 00:02:37.740 It's called council. 00:02:39.210 --> 00:02:45.970 Usually we specify a class for this if you use an ID for one specific item it will work as well. 00:02:46.110 --> 00:02:48.460 Well usually we use a class for this. 00:02:48.810 --> 00:02:57.200 So let's say we want to add a class to the mysterious item. 00:02:57.330 --> 00:03:01.860 So let's give it to a class the name is for example not sortable. 00:03:03.180 --> 00:03:10.580 And all we need to do is copy this class and put it there. 00:03:12.010 --> 00:03:13.100 OK. 00:03:13.110 --> 00:03:20.210 Now if we try all the other elements they are suitable but we can not drink the Mercedes light on that 00:03:22.500 --> 00:03:23.430 point. 00:03:23.460 --> 00:03:29.510 Now we can create another list inside the Microsoft stuff. 00:03:29.980 --> 00:03:33.180 Let's just copy paste the first list 00:03:38.460 --> 00:03:41.000 and misplace it. 00:03:41.400 --> 00:03:45.170 It's up to the link. 00:03:45.180 --> 00:03:52.380 All right let's change the IDs so first one is give these lists one and second one is called its list 00:03:52.470 --> 00:03:56.470 list to change the ID as well. 00:03:56.690 --> 00:04:00.960 OK so now we want to make this list sortable as well. 00:04:00.990 --> 00:04:10.570 Before we do that this genius is signing a little bit for the green books and some budding cells. 00:04:10.730 --> 00:04:11.820 It looks better. 00:04:12.150 --> 00:04:17.660 And now let's make the second list. 00:04:17.790 --> 00:04:19.000 Sortable. 00:04:19.450 --> 00:04:22.990 So he needs access to list using his ID again. 00:04:23.340 --> 00:04:25.590 And we use the method sortable 00:04:28.410 --> 00:04:33.520 let's make sure it is working fine. 00:04:33.890 --> 00:04:34.520 OK. 00:04:34.860 --> 00:04:40.110 Now we want both lists to exchange items. 00:04:40.170 --> 00:04:40.720 OK. 00:04:40.890 --> 00:04:50.280 Does it change the values or text inside the list items list puts some other comics. 00:04:50.670 --> 00:04:54.530 OK let's go for Harari for example. 00:04:54.540 --> 00:04:56.320 It looks better. 00:04:56.850 --> 00:04:57.860 OK. 00:04:57.990 --> 00:05:01.000 We're going to be using the same method sortable. 00:05:01.330 --> 00:05:02.040 OK. 00:05:02.400 --> 00:05:11.200 But we need to select both both lists so we need to select both lists. 00:05:11.370 --> 00:05:16.370 So first list using is ID is one that Colmer leads to. 00:05:16.710 --> 00:05:17.840 OK. 00:05:18.630 --> 00:05:21.900 And then we're going to use this possible method 00:05:25.170 --> 00:05:32.080 and this time we'll use another option inside the sortable method. 00:05:32.400 --> 00:05:43.380 It's called connects with and basically basically we need one class to be shared between both lists 00:05:43.380 --> 00:05:45.700 . 00:05:45.840 --> 00:05:48.220 OK. 00:05:48.540 --> 00:06:01.320 And the value of the option connects with is going to be that specific class. 00:06:01.320 --> 00:06:04.680 So first let's give both lists the same class name. 00:06:04.680 --> 00:06:13.130 So we need a class for each list so let's let's call this class connected list for example 00:06:16.860 --> 00:06:22.160 and we need the same plus for the second list. 00:06:23.040 --> 00:06:24.840 And then we refer to this class 00:06:28.060 --> 00:06:31.550 in the option connects with. 00:06:31.770 --> 00:06:33.090 All right. 00:06:33.930 --> 00:06:35.530 OK. 00:06:35.580 --> 00:06:35.890 OK. 00:06:36.120 --> 00:06:41.790 So we can move items both from the first to the through the second list and the opposite way as well 00:06:41.790 --> 00:06:42.870 . 00:06:42.870 --> 00:06:45.100 All right. 00:06:46.590 --> 00:06:55.240 Now if we move all the items from the second list to the first list and when to move them back we can 00:06:55.290 --> 00:06:59.110 do that. 00:07:02.480 --> 00:07:03.480 OK. 00:07:03.480 --> 00:07:11.890 And the reason why is because once the list is emptied from all the items it doesn't take any space 00:07:11.910 --> 00:07:12.680 any more. 00:07:13.010 --> 00:07:20.550 Inside in the in the documents all we need to do is make sure that there is a minimum height for both 00:07:20.550 --> 00:07:30.330 lists and for this we can just tile the new class we defined K'NEX lists. 00:07:33.950 --> 00:07:34.590 OK. 00:07:34.600 --> 00:07:35.050 And 00:07:37.770 --> 00:07:42.060 let's set the border style. 00:07:42.900 --> 00:07:48.120 OK so let's go for one pixel for with let's of solid border 00:07:50.930 --> 00:07:57.620 and let's go for a color ex-couple white. 00:07:57.890 --> 00:07:59.510 I think that's OK. 00:07:59.700 --> 00:08:00.620 So you can see here. 00:08:00.660 --> 00:08:03.640 That's our second list has collapsed. 00:08:03.690 --> 00:08:09.090 That's why we can't move any item from the first list. 00:08:09.100 --> 00:08:09.870 The second is. 00:08:10.030 --> 00:08:13.080 But now if we change the height or the mean heights 00:08:16.820 --> 00:08:27.120 between the mean height to 20 pixels for example you can see that now we can still see the empty list 00:08:27.150 --> 00:08:33.200 but this Troy is trying to move. 00:08:33.470 --> 00:08:37.700 You can see that now we can move elements from the first place to the second. 00:08:37.700 --> 00:08:40.040 This is working just fine. 00:08:40.860 --> 00:08:42.300 OK. 00:08:42.540 --> 00:08:43.610 All right. 00:08:43.620 --> 00:08:48.000 In the next video we're going to start looking at the AJ QUERER UI widgets. 00:08:48.150 --> 00:08:50.250 So we're going to start with coding