Mastering Angular Components - Second Edition

Integrating drag and drop

We can now use the draggable and draggable drop zone directives in our task list component, so that we can enable the reordering of tasks using drag and drop.

We can do this by attaching both of the directives to the task elements within the task list component template. Yeah, that's right! We want to make our task components draggable, but also a drop zone at the same time. That way, we can drop tasks onto other tasks, and that gives us the foundation for reordering. What we will do is reorder the list on a drop, so that the dropped task will be squeezed into the position right before the task where it was dropped.

First, let's apply the drag and drop directives to the task host elements in the task list component ...