Manipulando Dados no Drag and Drop API com dataTransfer em JavaScript

Quando um elemento é arrastado, o manipulador de eventos associado ao arraste recebe um objeto do tipo DragEvent. Esse evento possui uma propriedade especial chamada dataTransfer, que é uma instância de DataTransfer. A propriedade dataTransfer permite acessar e manipular os dados associados ao elemento arrastado durante o evento.

Propriedades do Objeto DataTransfer

O objeto DataTransfer oferece várias propriedades para manipular dados arrastáveis:

dropEffect: Define ou obtém o tipo de operação de arraste. Os valores possíveis são:
- copy: Cria uma cópia dos dados e a coloca na nova posição.
- move: Move os dados para a nova posição.
- link: Cria um link para a origem dos dados.
- none: Impede que os dados sejam movidos.
effectAllowed: Define os tipos de operação permitidos durante o arraste. Valores possíveis:
- none: O elemento não pode ser arrastado.
- copy: Permite copiar o elemento.
- copyLink: Permite copiar ou criar um link para o elemento.
- copyMove: Permite copiar ou mover o elemento.
- link: Permite criar um link para o elemento.
- linkMove: Permite mover ou criar um link para o elemento.
- move: Permite mover o elemento para outro local.
- all : Todas as operações são permitidas.
- uninitialized: Valor padrão, equivalente a all.
files: Uma lista de arquivos locais disponíveis para o arraste. Se o arraste não envolver arquivos, esta propriedade será uma lista vazia.
items: Um objeto DataTransferItemList que contém todos os itens de dados associados ao evento de arraste.
types: Um array de strings que especifica os formatos de dados definidos no evento de arraste.

Métodos do Objeto DataTransfer

Os seguintes métodos permitem a manipulação dos dados durante o arraste:

clearData(): Remove todos os dados associados ao objeto DataTransfer.
getData(format): Obtém os dados de um formato específico. Retorna uma string vazia caso os dados para o formato solicitado não estejam disponíveis.
setData(format, data): Define os dados para um formato específico. Substitui os dados existentes do mesmo formato.
setDragImage(imgElement, xOffset, yOffset): Define uma imagem personalizada exibida durante o arraste.
- imgElement: Elemento <img> usado como origem da imagem.
- xOffset e yOffset: Posições horizontais e verticais relativas dentro da imagem.

Os métodos setData() e getData() são especialmente úteis para transferir dados personalizados no contexto do arraste.

O exemplo abaixo demonstra como implementar elementos arrastáveis e gerenciar os dados associados ao arraste.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo de Drag & Drop</title>
    <style>
      #target {
        width: 200px;
        height: 150px;
        border: 1px dashed #ccc;
      }
      #target.dragover {
        border-color: #000;
      }
      .item {
        width: 50px;
        height: 50px;
        display: inline-block;
        margin: 5px;
        cursor: grab;
      }
    </style>
  </head>
  <body>
    <div class="item" style="background-color: red;" draggable="true"></div>
    <div class="item" style="background-color: blue;" draggable="true"></div>
    <div id="target"></div>
    <script>
      const items = document.getElementsByClassName("item");

      // Configura o evento "dragstart" para os elementos arrastáveis
      for (const item of items) {
        item.addEventListener("dragstart", (e) => {
          // Define o HTML do elemento como dado arrastável
          e.dataTransfer.setData("text/html", e.target.outerHTML);
        });
      }

      const target = document.getElementById("target");

      // Permite o comportamento de "drop" na área alvo
      target.addEventListener("dragover", (e) => e.preventDefault());

      // Adiciona uma classe para indicar quando o item está sobre a área alvo
      target.addEventListener("dragenter", (e) => e.target.classList.add("dragover"));
      target.addEventListener("dragleave", (e) => e.target.classList.remove("dragover"));

      // Adiciona o elemento arrastado à área alvo ao soltá-lo
      target.addEventListener("drop", (e) => {
        e.preventDefault();
        e.target.innerHTML += e.dataTransfer.getData("text/html");
        e.target.classList.remove("dragover");
      });
    </script>
  </body>
</html>

Explicação do código acima:

Elementos Arrastáveis (draggable): Os quadrados vermelho e azul possuem a classe item e o atributo draggable="true", o que os torna arrastáveis.
Evento dragstart: Este evento é disparado ao iniciar o arraste. O método setData() define o HTML do elemento como o dado a ser transferido.
```
e.dataTransfer.setData("text/html", e.target.outerHTML);
```
Área de Destino (target):
- O evento dragover utiliza preventDefault() para habilitar o comportamento de soltar o elemento.
- Os eventos dragenter e dragleave alternam a classe dragover, alterando a aparência visual da área alvo.
Evento drop: No momento em que o item é solto, os dados são obtidos com getData() e adicionados ao conteúdo da área alvo.
```
e.target.innerHTML += e.dataTransfer.getData("text/html");
```
Interatividade Visual: A classe dragover muda a borda da área de destino enquanto o elemento está sobre ela.

Movendo Elementos com DataTransfer em Drag-and-Drop API

Documentação oficial: