1
00:00:02,220 --> 00:00:07,020
To mark something as a drop zone or as a place where you can finish a drag event

2
00:00:07,020 --> 00:00:11,130
so to say, you need to add an event listener and prevent the default

3
00:00:11,210 --> 00:00:16,650
and we do this on our project list here because when we drag an element here, I want to be able to drop

4
00:00:16,650 --> 00:00:18,240
it here into this list.

5
00:00:18,240 --> 00:00:24,580
So we need to go to that list and listen to these events and prevent the default. For that here in the

6
00:00:24,580 --> 00:00:29,260
project list class which is in the end responsible for managing our lists,

7
00:00:29,260 --> 00:00:37,520
I'll add a connect droppable method and trigger that from inside the constructor, so that when we create

8
00:00:37,520 --> 00:00:45,410
a new project list, we in the end set up this droppable event listening here. For that we need access

9
00:00:45,410 --> 00:00:53,360
to the list and we can get access here with this selector here or almost this selector, remove the li

10
00:00:53,390 --> 00:01:00,200
here and instead get access to the unordered list, the ul tag and this gives us access to the list element

11
00:01:00,200 --> 00:01:00,770
itself.

12
00:01:00,770 --> 00:01:08,090
So not to the section with our items but only to a list in there because that is where ultimately the

13
00:01:08,180 --> 00:01:09,140
items should be added.

14
00:01:12,010 --> 00:01:18,220
So now on that list here, on that unordered list in our project list here for the two different types

15
00:01:18,220 --> 00:01:22,600
we have, we can add an event listener and I'll add two event listeners,

16
00:01:22,600 --> 00:01:30,940
one for drag enter where I need the event object and then we do something and one for drag over.

17
00:01:30,940 --> 00:01:38,110
Now again, the difference is when they are triggered regarding nested child elements. You definitely need

18
00:01:38,110 --> 00:01:44,380
the drag over listener and in there, you need the call event prevent default, for drag enter, that is optional.

19
00:01:44,440 --> 00:01:46,360
Nonetheless I'll do both

20
00:01:46,360 --> 00:01:50,520
and now we can just call event prevent default here,

21
00:01:50,530 --> 00:01:57,700
just like this and do it in both event listeners and with that, we would be able to drop our element here

22
00:01:57,820 --> 00:02:04,000
and the drop event would be triggered. If we don't do this, then we can still drop the element there but

23
00:02:04,000 --> 00:02:06,400
no drop event will be triggered.

24
00:02:06,400 --> 00:02:11,230
Now sometimes, you might not want to always just prevent a default here if something is dragged over

25
00:02:11,230 --> 00:02:11,410
it

26
00:02:11,770 --> 00:02:19,890
but maybe you also want to check the type let's say. You can do this with event data transfer and there,

27
00:02:19,890 --> 00:02:24,990
you could check types which is an array that exists in there and have a look at the first element and

28
00:02:24,990 --> 00:02:32,140
here I want to check if that is text/plain and if it is, then I want to prevent the default,

29
00:02:32,160 --> 00:02:34,140
otherwise I won't

30
00:02:34,140 --> 00:02:38,880
and that means that if we drag anything else above this, which is not possible on this page because the

31
00:02:38,880 --> 00:02:45,020
only thing marked as draggable is the list item which will set that data type when we start dragging

32
00:02:45,060 --> 00:02:50,520
but if you had more drag and drop operations on your page, where you for example can also drag some links

33
00:02:50,520 --> 00:02:56,730
or anything like that, well then you might want to add such an extra check to make sure you're only accepting

34
00:02:56,730 --> 00:03:03,300
the right kind of data here to be dragged into. What you can't access here as a side note is the concrete

35
00:03:03,300 --> 00:03:08,740
data that is attached, so you can't access the data that's attached here,

36
00:03:08,760 --> 00:03:10,070
only the type of the data.

37
00:03:10,080 --> 00:03:12,740
So we unfortunately can't read

38
00:03:12,740 --> 00:03:16,260
the ID for example in here, that is not possible,

39
00:03:16,260 --> 00:03:22,870
we'll have to do with the types. We will be able to then get that data in the drop event though and that

40
00:03:22,900 --> 00:03:27,490
is the place where we ultimately update our UI. Before we do that

41
00:03:27,490 --> 00:03:34,270
however, I also want to adjust my styling a little bit, to give the user some visual feedback that you

42
00:03:34,270 --> 00:03:40,510
can drop something here because right now we could drop an item there but we don't really see that it's

43
00:03:40,510 --> 00:03:44,380
possible. Now to give the users some feedback,

44
00:03:44,500 --> 00:03:54,300
I'll go to drag enter here, so when we first enter this unordered list so to say and in there, on the

45
00:03:54,300 --> 00:04:02,570
list, to be precise on the parent element of the list which is the section, I'll add a class with class

46
00:04:02,570 --> 00:04:06,130
list add which should be droppable.

47
00:04:06,340 --> 00:04:12,650
Now this class doesn't exist yet, we have to add it, for this we can go to the app.css file and

48
00:04:12,650 --> 00:04:18,950
there, anywhere where you want, maybe below that card here, you can add a droppable class, written exactly

49
00:04:18,950 --> 00:04:31,260
like in a Javascript file and assign a background color of, well I picked #ffeoec, a slight rose color.

50
00:04:31,450 --> 00:04:36,350
So now this will be added as a background color to the item we dragged our item over

51
00:04:36,430 --> 00:04:44,560
and now if we reload, I get an error, line 155, yes here in connect droppable, we should use this

52
00:04:44,620 --> 00:04:49,510
type here of course because it's in a property, it's not a variable that would be available here

53
00:04:49,660 --> 00:04:55,120
and I also see that here, we should of course change this to just query selector, not query selector

54
00:04:55,120 --> 00:04:57,410
all because I'm only selecting one list here,

55
00:04:57,430 --> 00:04:59,200
the first and only list in here.

56
00:04:59,230 --> 00:05:00,600
So let's save that

57
00:05:00,900 --> 00:05:06,190
and now after reloading, this works and now if we drag this, you see, this now, the background gets marked

58
00:05:06,430 --> 00:05:07,000
and also

59
00:05:07,000 --> 00:05:08,200
if I drag it down there.

60
00:05:08,200 --> 00:05:12,250
Right now this never gets unmarked but that's something we'll add

61
00:05:12,250 --> 00:05:13,290
but at least it works,

62
00:05:13,300 --> 00:05:19,390
so we successfully add our styles which also proves that this event triggers, otherwise that wouldn't

63
00:05:19,390 --> 00:05:21,060
happen. To be precise,

64
00:05:21,070 --> 00:05:27,010
I might want to update the style in this if check because that is the only condition under which we should

65
00:05:27,010 --> 00:05:28,770
be able to drop something there.

66
00:05:28,780 --> 00:05:32,230
So let me reload after changing this and it still works,

67
00:05:32,230 --> 00:05:34,520
which means our if check works.

68
00:05:34,520 --> 00:05:35,080
So that's great,

69
00:05:35,080 --> 00:05:35,990
this is working,

70
00:05:36,070 --> 00:05:39,970
now let's make sure we also change that style again

71
00:05:39,970 --> 00:05:45,400
once an item leaves this box because right now, we change the background once but then we keep the style

72
00:05:45,430 --> 00:05:51,640
which of course is not what I want to do here. To make sure we update this style once we leave the list

73
00:05:51,640 --> 00:05:52,930
with our element,

74
00:05:52,930 --> 00:05:59,320
Ww can add another event listener to the list and that's the drag leave event listener and this will

75
00:05:59,320 --> 00:06:03,780
trigger whenever we leave the list with our element.

76
00:06:03,820 --> 00:06:06,820
Now here we got some tricky behavior though as you will see

77
00:06:07,070 --> 00:06:12,970
but first of all, let's just start with the implementation you would probably expect,

78
00:06:12,970 --> 00:06:17,470
we simply remove the droppable class here whenever this triggers

79
00:06:17,470 --> 00:06:21,190
because that means we left the list with our item, right?

80
00:06:21,190 --> 00:06:25,070
So now if we implement it like this however, we'll see that this doesn't work correctly.

81
00:06:25,120 --> 00:06:30,240
If I reload, it gets marked but you see I'm still in the list and nonetheless

82
00:06:30,710 --> 00:06:32,310
this got removed.

83
00:06:32,320 --> 00:06:38,920
If I re-enter it, briefly is there but basically as soon as my cursor moves over some child item, this

84
00:06:38,920 --> 00:06:40,150
style gets removed,

85
00:06:40,150 --> 00:06:41,290
same for the bottom list,

86
00:06:41,290 --> 00:06:42,050
here it is,

87
00:06:42,130 --> 00:06:46,800
as soon as the cursor is above the other list item, the background is not marked anymore.

88
00:06:46,840 --> 00:06:50,160
It should still be marked though because I'm still in the droppable area,

89
00:06:50,230 --> 00:06:57,490
my cursor just is above a child item and the issue is that the drag leave event also fires when we

90
00:06:57,490 --> 00:07:03,280
basically leave the list here because we enter a child item of the list.

91
00:07:03,280 --> 00:07:09,850
Now to work around that issue, I want to add an if check here and only remove that class if the leave

92
00:07:09,850 --> 00:07:16,320
event triggered because we really left into a non-child item.

93
00:07:16,390 --> 00:07:21,610
Now for that, we can use event related target which I mentioned earlier in this module,

94
00:07:21,610 --> 00:07:27,470
it also exists for drag leave and it will point at the element we moved to.

95
00:07:27,580 --> 00:07:34,240
So when we leave the unordered list here and the cursor is now somewhere else, the somewhere else element

96
00:07:34,270 --> 00:07:36,190
will be the related target.

97
00:07:36,190 --> 00:07:42,340
Now we can check if that related target is inside of the list, in which case I don't want to remove the

98
00:07:42,340 --> 00:07:44,100
style or not

99
00:07:44,150 --> 00:07:46,420
and for that we can use closest again.

100
00:07:46,840 --> 00:07:54,070
We can use closest to select the closest unordered list with this selector up here,

101
00:07:54,070 --> 00:07:59,890
so with the exact same selector and hence we need back ticks here, we can check if the related target basically

102
00:07:59,890 --> 00:08:02,100
has an ancestor which is this list

103
00:08:02,230 --> 00:08:05,890
and if it has such an ancestor, we know we're still in the list.

104
00:08:05,890 --> 00:08:11,920
If we don't find such an ancestor for the related target, then we know we're outside of the list.

105
00:08:11,920 --> 00:08:15,730
So here I want to check if that item I'm selecting here with that,

106
00:08:15,820 --> 00:08:18,490
if that is not equal to the list here,

107
00:08:18,580 --> 00:08:23,200
so to this list because if it's not equal, then we're not inside of the list

108
00:08:23,200 --> 00:08:28,660
and in this case, I want to remove droppable, otherwise we'll not do anything because otherwise we're

109
00:08:28,660 --> 00:08:30,970
still in the list with the item.

110
00:08:30,970 --> 00:08:36,670
Now with that if we reload, we should have a behavior where we can drag this and it stays here, the background

111
00:08:36,670 --> 00:08:38,510
stays, only for leave,

112
00:08:38,650 --> 00:08:41,310
it gets removed the same for the bottom here as well,

113
00:08:41,320 --> 00:08:45,480
so now we can really move that item and now drop it anywhere.

114
00:08:45,490 --> 00:08:50,110
Now we just have to make sure that when we drop it, we also move it.