1
00:00:02,540 --> 00:00:06,240
For that I am back in the project we worked on earlier,

2
00:00:06,270 --> 00:00:13,610
we'll use the index.html now and the app.js file and here in the browser, I'll therefore go to index.html

3
00:00:13,640 --> 00:00:16,260
here instead of events.html.

4
00:00:16,310 --> 00:00:23,040
This is the project we worked on where we can move items between our two boxes here,

5
00:00:23,060 --> 00:00:24,200
just like that

6
00:00:24,350 --> 00:00:30,800
and this is where I now want to implement drag and drop. Now as I said, it all starts and actually

7
00:00:30,800 --> 00:00:32,780
I'll disable this analytics thing here,

8
00:00:32,780 --> 00:00:34,020
it's a bit annoying here.

9
00:00:34,220 --> 00:00:37,580
So let me go to app.js and here in app init,

10
00:00:38,740 --> 00:00:41,480
I'll disable this timer code here,

11
00:00:41,530 --> 00:00:44,500
save that so that we don't have this in a console.

12
00:00:44,500 --> 00:00:47,850
So with that, let's start by making the elements here

13
00:00:47,980 --> 00:00:54,970
draggable and we'll do this by going to the HTML file, to the elements here and there on the list

14
00:00:55,000 --> 00:01:00,130
item which is the element that should be draggable, we add the draggable attribute and important,

15
00:01:00,240 --> 00:01:01,430
set this to true.

16
00:01:01,600 --> 00:01:03,860
Just adding it like this would not be enough,

17
00:01:03,940 --> 00:01:05,440
you have to set it to true.

18
00:01:05,620 --> 00:01:10,270
If you created the element programmatically, you can control the property, the draggable property and

19
00:01:10,270 --> 00:01:12,280
set that to true. Of course

20
00:01:12,280 --> 00:01:14,610
do that for all the list items here,

21
00:01:14,620 --> 00:01:18,490
so for the two in the first box and the one in the third box

22
00:01:18,490 --> 00:01:24,340
and once you did that and you save the file and you reload, you can already drag this element here.

23
00:01:24,340 --> 00:01:26,790
Now dropping it somewhere won't do anything,

24
00:01:26,800 --> 00:01:30,060
you can drop it everywhere and it will not do a single thing

25
00:01:30,190 --> 00:01:33,830
and here you also see that you get this visual feedback,

26
00:01:33,850 --> 00:01:41,110
we have the item here, a transparent version of it on our mouse cursor and we can drop it anywhere but

27
00:01:41,230 --> 00:01:44,040
it's not really moved and that is how it should behave.

28
00:01:44,100 --> 00:01:50,770
Now side note, you see here when this is not fully visible we get this effect where the finished projects

29
00:01:51,400 --> 00:01:56,980
part is also part of the element but we will only drag the selected element, so that all will work

30
00:01:57,010 --> 00:01:58,800
as expected.

31
00:01:58,800 --> 00:02:00,390
So now this is draggable,

32
00:02:00,420 --> 00:02:02,120
how do we proceed?

33
00:02:02,130 --> 00:02:06,430
Well the next step was to listen to the drag start event,

34
00:02:06,450 --> 00:02:12,570
so in app.js, we want to do that and that happens on the item we're dragging, so we'll represent this

35
00:02:12,560 --> 00:02:18,210
here with our project item plus. There we're setting up listeners to the more info button and to the

36
00:02:18,210 --> 00:02:19,300
switch button,

37
00:02:19,380 --> 00:02:24,840
I will also set up a listener to the drag start event and for this, I'll add a new method here and

38
00:02:24,840 --> 00:02:27,050
I'll name it connect drag,

39
00:02:27,180 --> 00:02:31,260
you can name it however you want, of course I'll just name it like this to be in line with connect more

40
00:02:31,260 --> 00:02:33,630
info button and connect switch button

41
00:02:33,630 --> 00:02:41,380
and then here in the constructor, I will call this connect drag like that. Now inside of connect drag,

42
00:02:41,650 --> 00:02:43,660
I now want to add this event listener.

43
00:02:44,050 --> 00:02:52,420
So here we can get our element by ID, by this ID because we have the element ID stored in the ID

44
00:02:52,420 --> 00:02:54,230
property of this class

45
00:02:54,430 --> 00:02:57,310
and then as we did it earlier, add an event listener

46
00:02:57,310 --> 00:03:03,330
and then here drag start. This is the event I want to listen to,

47
00:03:03,400 --> 00:03:08,440
now we get an event object in that function and I'll just use an anonymous function here,

48
00:03:08,440 --> 00:03:11,690
you could of course also add a new method and point at that

49
00:03:12,010 --> 00:03:15,490
and now in here, we can configure that drag event

50
00:03:15,490 --> 00:03:19,560
as I mentioned. You can configure the data you want to append,

51
00:03:19,570 --> 00:03:25,780
you can configure which kind of operation it is so that the browser can display the correct cursor and

52
00:03:25,780 --> 00:03:31,090
you can also, if you wanted to, change this preview image which is generated here,

53
00:03:31,090 --> 00:03:33,710
so the thing attached to our mouse. By default

54
00:03:33,730 --> 00:03:36,320
it's a preview of the DOM element,

55
00:03:36,340 --> 00:03:39,660
now you could also point at any other image here

56
00:03:39,730 --> 00:03:46,120
and by the way, in the last lecture of this module, you'll also find a more detailed document regarding

57
00:03:46,120 --> 00:03:53,740
drag and drop operations with alternatives and also deeper explanations on other parts or other of things

58
00:03:53,740 --> 00:03:57,230
you could do with it which we simply don't need in this project here,

59
00:03:57,250 --> 00:04:01,390
so that will be a great resource to dive deeper. In this example here,

60
00:04:01,390 --> 00:04:03,960
I don't want to change that preview image,

61
00:04:04,120 --> 00:04:10,870
I want to append some data though, I want to append the ID of the element we're dragging, so that later

62
00:04:10,870 --> 00:04:16,510
when we drop it somewhere, we can extract that ID from the event object and do something with that

63
00:04:16,600 --> 00:04:23,020
because otherwise, we'll not know which kind of element was dragged in the place where it is dropped.

64
00:04:23,020 --> 00:04:29,560
We can do this here with the event object because there, since it's a drag event, you'll have a data transfer

65
00:04:29,950 --> 00:04:35,810
property or object which it is and there, you can call a set data method.

66
00:04:35,920 --> 00:04:41,390
Now on set data, you can set data of different types.

67
00:04:41,470 --> 00:04:43,610
You find this document attached here,

68
00:04:43,680 --> 00:04:46,870
you'll find examples of the different types of data you can add,

69
00:04:46,870 --> 00:04:51,970
for example you can add plain text identified with this identifier and then any text of your choice.

70
00:04:52,570 --> 00:05:01,140
You can attach links, you can attach HTML or XML content, so you can attach a broad variety of

71
00:05:01,440 --> 00:05:08,760
things, of data and the type which we use here will be important for when we then plan on making

72
00:05:08,760 --> 00:05:15,360
or adding a droppable place in our application because there, we could check what is getting

73
00:05:15,360 --> 00:05:21,490
dragged over it so that we don't accept any droppable data but only of a specific type.

74
00:05:21,510 --> 00:05:27,120
So here I'll go with plain text and therefore the first argument here is text/plain, the identifier

75
00:05:27,120 --> 00:05:33,480
for just the text and the second argument is this ID, the ID is in the end just a string and

76
00:05:33,480 --> 00:05:40,420
therefore plain text so we can just pass the ID like that. We can also set another property on data

77
00:05:40,420 --> 00:05:43,680
transfer and that's the effect allowed property.

78
00:05:43,720 --> 00:05:48,880
Here we describe which kind of drag and drop operation is getting performed

79
00:05:48,880 --> 00:05:54,850
and this can have one of these values here, you also find this link attached where you can have a move

80
00:05:54,850 --> 00:05:58,120
operation, a copy operation and so on.

81
00:05:58,120 --> 00:06:01,520
Now the browser cursor should be updated accordingly

82
00:06:01,570 --> 00:06:09,150
and here I'll go for regular move operation by simply setting this equal to move here

83
00:06:09,460 --> 00:06:12,750
and with that for me, my drag event is configured,

84
00:06:12,760 --> 00:06:14,870
we added some data to it.

85
00:06:14,920 --> 00:06:21,460
Now the next step is to make a certain part of our page a drop zone if you want to call it like that.