So let's now come to the end of this project and that involves the possibility to drag and drop a project
which we have in one of the two boxes for example in the ACT projects box in the other box.
So to basically switch the project from being an act of project to being a finished project.
So it's also not just about the visual update.
It's not just about dragging and dropping it and updating the UI.
It's also about adjusting the data behind the scenes in our estate management class in the projects
state where we manage a list of projects in the end.
Keep in mind that every project does have a status property and we'll need to update that as well.
So two things we need to implement drag and drop and then also this behind the scenes state and data
date.
Now let's start with drag and drop and for that we will basically implement drag drop as we would do
it in vanilla javascript which you for example can learn about in my complete javascript guide.
Basically it's all about implementing a bunch of event listeners and of course you will see how it works
in this module in the next lectures but will implement it in typescript style.
So we'll enhance it by using some typescript features.
So let's get started.
And how do I want to enhance it with types of features.
Well I want to reuse interfaces here drag and drop interfaces but not just to define the structure of
some objects as we previously used interfaces but instead to really set up a contract which certain
classes can sign to force these classes to to basically implement certain methods that help us with
drag and drop to be precise.
I'm thinking about two interfaces and of course using these interfaces will be optional but this will
allow us to well basically provide some code that forces a class to implement everything it needs to
be Dragonball or to be a valid drop target which if we were building a bigger application could help
us write cleaner code and more understandable code especially when working in a team.
So which interfaces am I talking about.
I want to have one interface which I'll name Dragonball and I'll have a second interface which will
name direct target.
My idea here is that we can add the dragon will interface to any class that renders an element which
can be Dragonball in our example.
That would be the project item class the project item class is responsible for rendering well these
project items a D should be the Dragonball pieces and the boxes act of projects and finished projects.
So here our project list class should be direct targets.
Now what do these interfaces forests to be implemented or to be added to the class instead.
Let's start with Dragonball here.
We basically need cue event listeners and therefore to handlers for these events.
A drag start handler which will be a method and a drag and handler
because when implementing drag and drop the thing what you want to drag will require some listener that
listens to these start off that drag event and also potentially a listener that listens to the end of
the drag event so that you can do any kind of updates there which you want to do.
Now the drag start event handler will get an event object which will you have kite drag event.
That's a built in type type scholarships with because of our teams conflict setup and the lips we're
adding there and it will not return anything it will be a method which executes but which then just
does something configure is the drag event for example but does not return.
Notice the drag and handler gets a similar event.
It also gets a drag event and it also returns nothing.
Now of course you will see how we apply those in just a few seconds.
So bear with me now what about the drag target.
Well for the target.
So the box onto which we can drag something.
There are three event handlers that want to implement a drag over handler a drop handler and a drag
leave handler.
Now what do these things do now.
You need to implement a drag over a handler when implementing drag and drop in javascript to basically
signal the browser and javascript that the thing you're dragging something over is a valid drag target.
If you don't do the right thing in the drag over handler dropping will not be possible.
You need to drop handler then to react to the actual drop that happens.
So if the drag over handler will permit to drop with the drop handler will handle the drop and then
here we can update our data and UI for example and the drag leave handler can be useful if we're for
example giving some visual feedback to the user when he or she drag something over the box.
For example we change the background color.
Well if no drop happens and instead it's cancelled or the user removes the element away we can use the
drag leaf handler to revert our visual update.
Now all free handlers all the receive a drag event and don't return anything.
So let's update them appropriately like this
and also for this last handler here and now we configured some interfaces which on their own don't do
much.
But now we can use them and I want to start with the project item.
So let's find our project item class for this.
Here's the component here's a project item and now you might remember that an interface cannot just
be used to define a custom object type but that you can use it as a contract on a class.
You can call implements or add implements here after your class name and offer potential extensions
you're doing and then implement the interface in this case the Dragonball interface.
Now when you do so and I just formatted this to bring it in a new line to make it easier to read.
When you do so you get an error.
Now that the class here incorrectly implements the interface because that's Dragonball interface forces
us to add two methods if you remember so let's add them here maybe below the constructor.
Let's add a drag start handler which gets an event of type drag event and let's also add our drag and
handler which receives our drag event and now we have these two methods added.
Now that alone does not enable drag and drop it just helps us write Dragonball components or Dragonball
classes in a uniform way.
So if we add more and more classes which should be Dragonball we always will have these methods which
simply makes it easier to reason about our code and to work our code especially when working in a team
because everyone knows where to put in work for the drag start event.
Now what this does not do of course is listen to a drag start event.
That's something we can do in the configure method which you already have though we can reach out to
our rendered element and add an event listener to it and there that would be the drag start event.
The drag start event is one event one default browser Dom event you can listen to and the event handler
we want to trigger of course is the drag start handler at which we can point here.
Now we also want to be sure that instead of the drag start handler the this keyword refers to our class.
And as you learned with event listeners that would by default not be the case.
So we could use bind here and bind this.
That would be valid but we have a better way actually.
We added our auto bind decorator so I'm just going to add this here to the drag start handler.
Now we can all listen to the drag and event here and point that the drag and handler.
You can also add auto buying there if you plan on using the this keyword here for the moment.
I will just log drag end in here so that we see the triggered because here I actually have nothing specific
I want to do with it and day off for I will also blank this parameter and basically tell typescript
that I'm not using it here in drag start we will use event and for the moment I'll just lock the event
windows event occurs.
Now that alone won't do the trick though.
If you save everything and you add some project here you'll see that you can't really drag it right
if you try to drag it.
That will not work because you also need to change something in your h html file on this list item which
is getting rendered for every project which is the thing you want to drag you have to add the Dragonball
attribute and set this to true that is important.
This tells the browser that this will be Dragon Ball with that if you saved it and you re add a project
here you see now this indeed is Dragon Ball.
It now is stuck to my mouse and now we can really move it around.
You're just fine you also see on the right that a dragon fired.
When I started a dragon.
And if I let go you'll see the drag and event all the fires.
So our listeners are connected and we can drag.
Now we can work on the drop target.
So on the box where it is should be Dragon Ball 2.
To then add the project to that box.
One thing I will also do real quick is in the app C as s file on the list item.
So on projects l I I will add a background color of white somebody so that we can see this a bit better.
So your project will I added white so that when we do drag around the project here we do have the white
BRAC round here.
So this makes it a bit easier to see doesn't change our next step though.
We want to make this tropical.