Visually we are able to drag and drop but technically in JavaScript Of course our script has no idea
of what's happening to us humans of course it's clear that we're dragging disk sect item here.
But if we have a look at our code how would javascript know what's getting dragged where.
How would we update our state based on the information we have right now.
It wouldn't really be possible.
So to make that work in JavaScript we have to go back to the class of our Dragonball item the project
item there into the rack start handler logging deep into the console isn't everything we should do.
Actually we don't need to do that at all.
Instead let's now use our event object here because dad has a data transfer property.
This is special for drag events.
They do have such a data transfer property and on that property you can attach data to the drag event
and you'll later be able to extract that data upon a drop and the browser and JavaScript behind the
scenes will store that data during the drag operation and ensure that the data you get when the drop
happens is the same data you attach here for that.
You can call set data on data transfer but data transfer could actually be null.
So we have to add an exclamation mark here.
We of course know that it won't be null here.
You might wonder why could it be null.
Well the drag event is always the same kind of event but based on which listener triggers it or which
exact event you're listening to data transfer is not necessarily away lable.
So not all drag related events give you an event object that has the data transfer object the drag start
handler which fires upon the drag start event.
However it does have it.
So here we can safely call set data and now set data takes two parameters two arguments here.
The first argument is an identifier of the format of the data and there you got a certain possible form
it's available.
Attached you will find a deep dive into drag and drop with JavaScript where you can learn way more about
that.
You'll also learn more about it in my javascript complete to guide course.
By the way here we need the text slash plain format which means we're just going to attach some plain
text as data that is transferred and that's important.
We're not going to attach our object here.
Our project itself which is getting tracked so not the concrete project which we rendered here instead
it actually suffices to attach the idea of the project because this will later allow us to fetch that
project from our state.
So attaching the idea is all we need to do we want to transfer only a small amount of data.
This will also save us some memory.
So now is that we're attaching data to the drag event.
One other thing I want to do is on data transfer where we again have to add to estimation Mark I'll
set the effect allowed property to move.
This basically controls how the cursor will look like and tells the browser a little bit about our intention
that we plan to move an element from a to b.
An alternative could be copy where you then get a different cursor which indicates to the user that
you're copying and not moving.
But here I really want to move the element which means upon a drop we remove it on its original place
and add it to the new place.
So now data is attached here.
Now that's step number one.
Let's now go back to the place where we want the drop to happen which is the project list there.
It starts with drag leave handler.
Now in this application in this project here we only have one drag and drop operation and that is our
projects here in bigger applications you might have different pieces on the page that can be dragged
and dropped and you don't want to make everything drop a ball everywhere.
So they offer a here and the drag sorry not net drag leave handler in the drag over handler which fires
when you enter a Dragonball area with an item attached to the mouse.
I want to check if a drag really is allowed here.
For that I will check if event data transfer here it is available as well.
So if that is a way lable and if then if it is a way lable the data transfer types property has a first
value which is equal to text slash plain.
That simply means is the data attached to our drag event.
Is that of that format which it of course is because that is the format we set up in the drag start
handler here.
So for example here I would not allow dropping images or something like that which would have a different
data format.
I just allowed dropping off plain text of course I now also need to replace underscore with event again
because I'm referring to it here.
Now if that is the case then I know I want to allow a drop so then I will update the background.
And there's one other important thing we got to do.
You have to call event prevent default.
Now why do we have to call that.
Because in JavaScript drag and drop it works such that a drop is actually only allowed.
So the drop event will only trigger on an element if in the drag over a handler on that same element
you called prevent default.
You can think of this as the following the default for JavaScript drag and drop events is to not allow
dropping.
So you have to prevent default in the drag over a handler to tell JavaScript in the browser that for
this element in this case for this section for just project list class you 1 allow a drop.
So only if you do this in a drag over handler the drop event will actually trigger when the user lets
go.
Otherwise if the user lets go the drop event will not fire.
So is that the drop handler will then eventually execute of course.
Because now we are allowing this to happen.
So here in the drop handler we now also can accept the event and for the moment let's just cancel lock
these event here like this to see whether it is works.
We now save everything and we add a new item here and I drag this if I drop it here and finish projects.
You see this drag event is firing here.
That's coming from line two hundred and thirty six which indeed is this line in the drop handler.
Now if we inspect the drag event here in the browser you see we have a bunch of data under and we also
have that data transfer property it in there you see the fact we allowed which is move and you'll also
see nothing in there.
Well only because the data was already cleared after this was being printed to the console.
And since we print the object here and objects are reference types well we see the latest snapshot where
the data is lost actually at the point of time we are dropping this.
We will be able to extract data from data transfer and I can prove this to you.
Of course we can simply access data transfer and there you have a get data method.
And now we want to get the data with this text plain format and that should be d project I.D. we attached
to our data transfer package it on the project item.
So if we now save this and we re at project here and directors here you see this here indeed is the
item is the I.D. of this project item.
We can see that if we inspect that because we also added here as an I.D. in the DOM serial dot to 1
6 7 looks like decided to me.
So we are successfully transferring the I.D. Now we're almost there.
Now we just have to update our state behind the scenes and then re render the UI.