Search code examples
angularangular-material2angular-cdk

Angular Material 7 Drag and Drop

Can someone explain or maybe show me some code on how he would do the following:

I have a match - with all assigned players to a team, then i have a starting eleven (11 placeholders on a map) and 7 positions on the teams bench.

How can I now drag and drop the players to the assigned placeholders on the soccerfield and the bench? If I drop it to a placeholder, the placeholder shouldnt be visible - but the dragged content - and I need the id of this dragged content (dragged player) to update the match.startingEleven, match.substitutes and remove the player from the match.assignedPlayers list.

Solution

  • The Chore Board project (demo, repo) implements a similar pattern and may help.

    enter image description here

    I had tried using angular 7 drag and drop (and there are several posts that show how to do so ). However as my requirements were more involved (drag group of items or individual items inside the group), I went with a native HTML5 solution.