Manipulando Dados de Elementos Arrastados com DataTransfer - Drag and Drop API - 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