1 00:00:02,230 --> 00:00:08,800 Visually we are able to drag and drop but technically in JavaScript Of course our script has no idea 2 00:00:08,800 --> 00:00:14,650 of what's happening to us humans of course it's clear that we're dragging disk sect item here. 3 00:00:14,800 --> 00:00:20,270 But if we have a look at our code how would javascript know what's getting dragged where. 4 00:00:20,380 --> 00:00:24,490 How would we update our state based on the information we have right now. 5 00:00:24,490 --> 00:00:26,600 It wouldn't really be possible. 6 00:00:26,740 --> 00:00:33,370 So to make that work in JavaScript we have to go back to the class of our Dragonball item the project 7 00:00:33,400 --> 00:00:40,030 item there into the rack start handler logging deep into the console isn't everything we should do. 8 00:00:40,030 --> 00:00:42,240 Actually we don't need to do that at all. 9 00:00:42,250 --> 00:00:48,190 Instead let's now use our event object here because dad has a data transfer property. 10 00:00:48,250 --> 00:00:50,650 This is special for drag events. 11 00:00:50,650 --> 00:00:57,430 They do have such a data transfer property and on that property you can attach data to the drag event 12 00:00:57,580 --> 00:01:03,370 and you'll later be able to extract that data upon a drop and the browser and JavaScript behind the 13 00:01:03,370 --> 00:01:08,830 scenes will store that data during the drag operation and ensure that the data you get when the drop 14 00:01:08,830 --> 00:01:12,420 happens is the same data you attach here for that. 15 00:01:12,430 --> 00:01:18,920 You can call set data on data transfer but data transfer could actually be null. 16 00:01:18,970 --> 00:01:21,090 So we have to add an exclamation mark here. 17 00:01:21,100 --> 00:01:23,470 We of course know that it won't be null here. 18 00:01:23,500 --> 00:01:25,710 You might wonder why could it be null. 19 00:01:25,750 --> 00:01:32,260 Well the drag event is always the same kind of event but based on which listener triggers it or which 20 00:01:32,260 --> 00:01:37,500 exact event you're listening to data transfer is not necessarily away lable. 21 00:01:37,570 --> 00:01:46,240 So not all drag related events give you an event object that has the data transfer object the drag start 22 00:01:46,240 --> 00:01:48,750 handler which fires upon the drag start event. 23 00:01:48,760 --> 00:01:49,990 However it does have it. 24 00:01:49,990 --> 00:01:56,340 So here we can safely call set data and now set data takes two parameters two arguments here. 25 00:01:56,380 --> 00:02:04,210 The first argument is an identifier of the format of the data and there you got a certain possible form 26 00:02:04,210 --> 00:02:04,960 it's available. 27 00:02:05,020 --> 00:02:10,630 Attached you will find a deep dive into drag and drop with JavaScript where you can learn way more about 28 00:02:10,630 --> 00:02:10,930 that. 29 00:02:10,930 --> 00:02:14,350 You'll also learn more about it in my javascript complete to guide course. 30 00:02:14,350 --> 00:02:20,700 By the way here we need the text slash plain format which means we're just going to attach some plain 31 00:02:20,700 --> 00:02:25,460 text as data that is transferred and that's important. 32 00:02:25,510 --> 00:02:28,300 We're not going to attach our object here. 33 00:02:28,300 --> 00:02:35,050 Our project itself which is getting tracked so not the concrete project which we rendered here instead 34 00:02:35,350 --> 00:02:42,880 it actually suffices to attach the idea of the project because this will later allow us to fetch that 35 00:02:42,880 --> 00:02:44,920 project from our state. 36 00:02:44,920 --> 00:02:50,250 So attaching the idea is all we need to do we want to transfer only a small amount of data. 37 00:02:50,260 --> 00:02:53,000 This will also save us some memory. 38 00:02:53,140 --> 00:02:56,320 So now is that we're attaching data to the drag event. 39 00:02:56,350 --> 00:03:02,570 One other thing I want to do is on data transfer where we again have to add to estimation Mark I'll 40 00:03:02,590 --> 00:03:05,410 set the effect allowed property to move. 41 00:03:05,440 --> 00:03:12,370 This basically controls how the cursor will look like and tells the browser a little bit about our intention 42 00:03:12,460 --> 00:03:15,220 that we plan to move an element from a to b. 43 00:03:15,280 --> 00:03:20,980 An alternative could be copy where you then get a different cursor which indicates to the user that 44 00:03:20,980 --> 00:03:23,100 you're copying and not moving. 45 00:03:23,140 --> 00:03:28,840 But here I really want to move the element which means upon a drop we remove it on its original place 46 00:03:28,840 --> 00:03:31,420 and add it to the new place. 47 00:03:31,420 --> 00:03:33,380 So now data is attached here. 48 00:03:33,400 --> 00:03:34,990 Now that's step number one. 49 00:03:34,990 --> 00:03:40,810 Let's now go back to the place where we want the drop to happen which is the project list there. 50 00:03:40,810 --> 00:03:43,360 It starts with drag leave handler. 51 00:03:43,420 --> 00:03:50,080 Now in this application in this project here we only have one drag and drop operation and that is our 52 00:03:50,080 --> 00:03:56,440 projects here in bigger applications you might have different pieces on the page that can be dragged 53 00:03:56,440 --> 00:04:01,000 and dropped and you don't want to make everything drop a ball everywhere. 54 00:04:01,120 --> 00:04:06,940 So they offer a here and the drag sorry not net drag leave handler in the drag over handler which fires 55 00:04:06,940 --> 00:04:11,920 when you enter a Dragonball area with an item attached to the mouse. 56 00:04:11,920 --> 00:04:14,750 I want to check if a drag really is allowed here. 57 00:04:15,010 --> 00:04:21,090 For that I will check if event data transfer here it is available as well. 58 00:04:21,090 --> 00:04:30,270 So if that is a way lable and if then if it is a way lable the data transfer types property has a first 59 00:04:30,270 --> 00:04:34,170 value which is equal to text slash plain. 60 00:04:34,350 --> 00:04:39,330 That simply means is the data attached to our drag event. 61 00:04:39,330 --> 00:04:45,920 Is that of that format which it of course is because that is the format we set up in the drag start 62 00:04:45,920 --> 00:04:47,340 handler here. 63 00:04:47,360 --> 00:04:52,340 So for example here I would not allow dropping images or something like that which would have a different 64 00:04:52,340 --> 00:04:53,190 data format. 65 00:04:53,240 --> 00:05:00,980 I just allowed dropping off plain text of course I now also need to replace underscore with event again 66 00:05:01,010 --> 00:05:03,110 because I'm referring to it here. 67 00:05:03,320 --> 00:05:09,000 Now if that is the case then I know I want to allow a drop so then I will update the background. 68 00:05:09,110 --> 00:05:11,690 And there's one other important thing we got to do. 69 00:05:11,690 --> 00:05:14,400 You have to call event prevent default. 70 00:05:14,400 --> 00:05:15,950 Now why do we have to call that. 71 00:05:16,010 --> 00:05:22,520 Because in JavaScript drag and drop it works such that a drop is actually only allowed. 72 00:05:22,520 --> 00:05:29,930 So the drop event will only trigger on an element if in the drag over a handler on that same element 73 00:05:30,260 --> 00:05:32,810 you called prevent default. 74 00:05:32,810 --> 00:05:40,340 You can think of this as the following the default for JavaScript drag and drop events is to not allow 75 00:05:40,340 --> 00:05:41,300 dropping. 76 00:05:41,420 --> 00:05:48,550 So you have to prevent default in the drag over a handler to tell JavaScript in the browser that for 77 00:05:48,550 --> 00:05:54,930 this element in this case for this section for just project list class you 1 allow a drop. 78 00:05:54,940 --> 00:06:00,910 So only if you do this in a drag over handler the drop event will actually trigger when the user lets 79 00:06:00,910 --> 00:06:01,270 go. 80 00:06:01,270 --> 00:06:05,070 Otherwise if the user lets go the drop event will not fire. 81 00:06:05,110 --> 00:06:09,010 So is that the drop handler will then eventually execute of course. 82 00:06:09,010 --> 00:06:12,600 Because now we are allowing this to happen. 83 00:06:12,670 --> 00:06:19,540 So here in the drop handler we now also can accept the event and for the moment let's just cancel lock 84 00:06:19,540 --> 00:06:23,840 these event here like this to see whether it is works. 85 00:06:23,970 --> 00:06:33,310 We now save everything and we add a new item here and I drag this if I drop it here and finish projects. 86 00:06:33,470 --> 00:06:36,610 You see this drag event is firing here. 87 00:06:36,630 --> 00:06:43,100 That's coming from line two hundred and thirty six which indeed is this line in the drop handler. 88 00:06:43,100 --> 00:06:48,290 Now if we inspect the drag event here in the browser you see we have a bunch of data under and we also 89 00:06:48,290 --> 00:06:55,130 have that data transfer property it in there you see the fact we allowed which is move and you'll also 90 00:06:55,130 --> 00:06:57,950 see nothing in there. 91 00:06:57,950 --> 00:07:04,560 Well only because the data was already cleared after this was being printed to the console. 92 00:07:04,640 --> 00:07:09,860 And since we print the object here and objects are reference types well we see the latest snapshot where 93 00:07:09,860 --> 00:07:13,290 the data is lost actually at the point of time we are dropping this. 94 00:07:13,400 --> 00:07:18,440 We will be able to extract data from data transfer and I can prove this to you. 95 00:07:18,440 --> 00:07:23,230 Of course we can simply access data transfer and there you have a get data method. 96 00:07:23,340 --> 00:07:29,510 And now we want to get the data with this text plain format and that should be d project I.D. we attached 97 00:07:29,540 --> 00:07:35,120 to our data transfer package it on the project item. 98 00:07:35,120 --> 00:07:43,300 So if we now save this and we re at project here and directors here you see this here indeed is the 99 00:07:43,300 --> 00:07:46,660 item is the I.D. of this project item. 100 00:07:46,660 --> 00:07:52,240 We can see that if we inspect that because we also added here as an I.D. in the DOM serial dot to 1 101 00:07:52,240 --> 00:07:55,510 6 7 looks like decided to me. 102 00:07:55,510 --> 00:08:00,520 So we are successfully transferring the I.D. Now we're almost there. 103 00:08:00,530 --> 00:08:06,010 Now we just have to update our state behind the scenes and then re render the UI.