# Drag and Drop com Angular Material e DropList dinâmica

## Que bom que aceitou o meu desafio :grin:

Já precisou criar um drag and drop com uma lista de objetos e não quis implementar cada DropList em um trecho html diferente? Eu também e por este motivo criei um simples exemplo de como utilizar o drag and drop do Angular Material com este intuito.

![](/files/-M7iWMnfn2JL5pLpvSxk)

### Mas o que tem de extraordinário nisso?

Nada de mais! Rsrs, mas na maioria dos exemplos que você vai encontrar cada DropList tem um respectivo trecho html, já aqui não, as DropList's são inseridas dinamicamente no html ao iterarmos numa lista de objetos.

### Pressupostos!

* Irei do ponto de partida de que você já sabe criar e configurar um projeto Angular IO
* Explicarei apenas como foi implementado a solução. Por este motivo leia atentamente a documentação do site [Angular Material - Drag and Drop](https://material.angular.io/cdk/drag-drop/overview)
* Vale lembrar que as bibliotecas utilizadas e suas respectivas versões estão disponíveis no package.json
* Você deve clonar o projeto de exemplo, mas se ainda não fez isso fique tranquilo que vou esperar você acessar o link a seguir:sleeping:[mat-drag-and-drop-example](https://github.com/arthur-lima-dev/mat-drag-and-drop-example)

#### Inicializando a aplicação

```
$ ng serve
```

{% hint style="success" %}
&#x20;Após carregar acesse <http://localhost:4200/> e divirta-se arrastando e soltando.
{% endhint %}

### Mas, e agora?

Agora vamos entender o que foi feito no código. A tela inicial é composta por três arquivos:

* drag-and-drop.component.html
* drag-and-drop.component.ts
* drag-and-drop.component.css

Nós iremos focar apenas no ".html" e no ".ts", pois o ".css" está idêntico a qualquer exemplo de drag and drop com mais de uma DropList no site do Angular Material.

Senhoras e senhores lhes apresento o ".html"&#x20;

{% code title="drag-and-drop.component.html" %}

```markup
<div class="margin-custom">
  <!-- Iterando numa lista para criar os cdkDropList's. 
    São os elemento que contém os itens que pode ser arrastados -->
  <div class="example-container" 
    *ngFor="let zoologico of zoologicos; let i = index">
    <h2>{{'Lista de soltar ' + (i + 1)}}</h2>
    <div class="example-list" 
      (cdkDropListDropped)="drop($event)" 
      [cdkDropListConnectedTo]="nomesDropList"
      [cdkDropListData]="zoologico.animais" 
      id="{{zoologico.nome}}" cdkDropList>

      <!-- Criando os cdkDrag's. São os itens que podem ser arrastados -->
      <div class="example-box" 
          *ngFor="let animal of zoologico.animais" cdkDrag>
        <span>{{animal}}</span>
      </div>
    </div>
  </div>
</div>
```

{% endcode %}

A diferença desse para os demais exemplo é que o utilizamos o atributo **id** para identificar a DropList deste modo podemos criá-las através da iteração em uma lista.

Agora vamos para o ".ts"

{% code title="drag-and-drop.component.ts" %}

```typescript
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-and-drop',
  templateUrl: './drag-and-drop.component.html',
  styleUrls: ['./drag-and-drop.component.css']
})
export class DragAndDropComponent {

  /* De preferência criem classes para representar seus objetos */
  zoologicos = [
    { nome:'Zoo1', animais: ['Leão', 'Macaco'] },
    { nome:'Zoo2', animais: ['Tigre', 'Elefante'] }
  ];

  /* o resultado será uma lista com [Zoo1, Zoo2] */
  nomesDropList = [...this.zoologicos.map(zoo => zoo.nome)];

  /* 
   * Esta função é padrão, em qualquer exemplo no site do Angular Material 
   * você irá encontrá-la implementada deste modo. 
   * Pelo menos até este momento :D! 
   */
  drop(event: CdkDragDrop<any[]>) {    
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data, 
        event.previousIndex, 
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }
}
```

{% endcode %}

Nada de mais concordam? Entretanto, tive muita dificuldade para encontrar algo que me ajuda-se a fazê-lo quando precisei.

**Obrigado por chegar até aqui! Fim**:sunglasses:&#x20;

![O Autor](/files/-M7s-eacEUwFodoje4vE)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers-friends.gitbook.io/blog/angular/drag-and-drop-com-angular-material-e-droplist-dinamica.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.