To make it draw people we have to go to the class or to the component in our application which showed
in the end act as a drag target.
So here project list class is the right class and there we can implement our second interface which
we added the direct target interface.
Now just as the Dragonball interface this forces us to to add certain methods to be precise here we
need to add the drag over handler the drop handler and the drag leave handler.
So let's do that maybe all the right here below the constructor above configure but the exact place
is up to you.
The order of methods does not matter.
So here I will add the drag over a handler where we get our drag event.
I will then add the drop handler here where we also get our drag event and last but not least the drag
leave handler where we also get a drag event.
Now these events by the way hold different kinds of data.
They're all based on the same core event type.
Now we've got a couple of different things to do.
Let's start with the drag over a handler maybe in the drag over a handler.
I want to change the appearance of of my box or off the unordered list in there to visualize that this
is a draw public area because right now when we drag around element we get no clue of where we can drop
it right.
Nothing changes on the UI so I want to change this to change this I'll add a cert to see us as class
to the on order list which you find an app sees as the tropical class which will change the background
color and therefore in here for a start we just need to get access to our unordered list to element.
We can do so by reaching out to this element query selector you l and add an exclamation mark because
there will always be an unordered list there.
Even if it holds no elements yet we just have to make sure that the this keyword works here and we can
do so by auto binding this year to make sure that this keyword is bound to the surrounding class.
And then with the list element select it we can use the class list property of dom elements.
So does this vanilla javascript here in the end and called the add method dare to add the tropical class
to it.
Now with that we of course have to make sure that the drag over a handler actually is fired when we
drag something over it is element here over it is rendered.
Section and to do that in the configure method where we already have one listener here listening to
our state changes I will also register listeners on the element itself.
The first event listener dear of course is to drag over event and I'll bind this to drag over handler
unsurprisingly and then I'll repeat this because I also want to listen to the drag leaf event and bind
us to the drag leaf handler and to the drop event and bind this to the drop handler because we'll all
need that later.
So with that we get this drag over event listener and the drag over a handler connected but we also
get some errors in the code.
Now while that should be the unused event objects here.
So for the moment to satisfy typescript let's just blank them out we'll need them later.
But for the moment to make this work let's blank them out by using underscores here to tell typescript
we're fine not using them at the moment.
Now does compiles and now back in the project when we add a new project here in a directors you see
when I drag is over finished project the background here got a light blue here over project that got
light rows like a slight pink color just to show us again if a reload you see now we have white backgrounds
in the projects whips.
And as soon as they start dragging this here it gets light pink background and when I drag it over finished
project the project the box background changes to light blue.
Now it never changes back to white because we never remove that probable class but it is a first step.
Of course dropping still does not work.
Dropping it here does not add the project because how wooded we haven't added any logic for this.
So let's make sure to also update to styling when we stop when we leave the element.
So when we basically drag it over here and then go away make sure that the blue background goes away
in that case.
That's what I want to do next Friday.
We can use the drag leaf handler here because Dad will fire whenever we will leave this element with
our direct element.
And now there I of course also want to get access to my on or to list so I'll copy that code.
But then there I want to remove the drop a ball CLOs and we should not also auto bind is so that the
this keyword here refers to the surrounding CLOs if we save that we add a new element here.
Let's give it a try.
Start dragging you see we have our background here and if I leave it goes away.
So now the background really is updated.
You see some flickering here because the drag leave event all the fires if you go from having the mouse
cursor over to background to having it over a rendered element but that should be fine here.
It's no big deal here.
So actually we got the desired effect that would say so the UI is updated just the way it should now.
But of course we're not able to draw up and really transfer data.
So Dad will be the next step.