HTML5 – Arrastar e soltar
Arrastar e soltar (DnD) é um poderoso conceito de interface de usuário que facilita copiar, reordenar e deletar de itens com a ajuda de cliques do mouse. Isso permite que o usuário clique e segure o botão do mouse sobre um elemento, arraste-o para outro local e solte o botão do mouse para soltar o elemento lá.
Para obter a funcionalidade de arrastar e soltar com o HTML4 tradicional, os desenvolvedores teriam que usar programação JavaScript complexa ou outras estruturas JavaScript como jQuery etc.
Agora, o HTML 5 veio com uma API de arrastar e soltar (DnD) que traz suporte nativo de DnD para a criação de navegadores é muito mais fácil de codificar.
HTML 5 DnD é compatível com todos os principais navegadores, como Chrome, Firefox 3.5 e Safari 4, etc.
Arrastar e soltar eventos
Existem vários eventos que são disparados durante vários estágios da operação de arrastar e soltar. Esses eventos estão listados abaixo –
| Sr.No. | Eventos & Descrição |
|---|---|
| 1 |
dragstart Dispara quando o usuário começa a arrastar o objeto. |
| 2 |
dragenter Disparado quando o mouse é movido pela primeira vez sobre o elemento de destino enquanto um arrasto está ocorrendo. Um ouvinte para este evento deve indicar se um drop é permitido neste local. Se não houver ouvintes, ou se os ouvintes não realizarem operações, não será permitida uma eliminação por padrão. |
| 3 |
dragover Este evento é disparado quando o mouse é movido sobre um elemento quando um arrasto está ocorrendo. Na maioria das vezes, a operação que ocorre durante um ouvinte será a mesma que o evento dragenter. |
| 4 |
dragleave Este evento é disparado quando o mouse deixa um elemento enquanto um arrasto está ocorrendo. Os ouvintes devem remover todos os marcadores de realce ou inserção usados para comentários de queda. |
| 5 |
arrastar Dispara sempre que o mouse é movido enquanto o objeto está sendo arrastado. |
| 6 |
drop O evento drop é disparado no elemento onde o drop ocorreu no final da operação de arrastar. Um ouvinte seria responsável por recuperar os dados que estão sendo arrastados e inseri-los no local de soltar. |
| 7 |
dragend Dispara quando o usuário libera o botão do mouse enquanto arrasta um objeto. |
Nota – Observe que apenas eventos de arrastar são disparados; eventos de mouse, como mousemove, não são disparados durante uma operação de arrastar.
O objeto DataTransfer
Os métodos de ouvinte de evento para todos os eventos arrastar e soltar aceitam o objeto Event que tem um atributo somente leitura chamado dataTransfer.
O event.dataTransfer retorna o objeto DataTransfer associado ao evento da seguinte maneira –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
O objeto DataTransfer contém dados sobre o arrasto e operação de queda. Esses dados podem ser recuperados e definidos em termos de vários atributos associados ao objeto DataTransfer, conforme explicado abaixo –
| Sr.No. | Atributos de transferência de dados e sua descrição |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Retorna um DOMStringList listando os formatos que foram definidos no evento dragstart. Além disso, se algum arquivo estiver sendo arrastado, um dos tipos será a string “Arquivos”. |
| 4 |
dataTransfer.clearData () Remove os dados dos formatos especificados. Remove todos os dados se o argumento for omitido. |
| 5 |
dataTransfer.setData (formato, dados) Adiciona os dados especificados. |
| 6 |
dados = transferência de dados.getData (format) Retorna os dados especificados. Se não houver esses dados, retorna a string vazia. |
| 7 |
dataTransfer.files Retorna uma FileList dos arquivos sendo arrastados, se houver. |
| 8 |
dataTransfer.setDragImage (element, x, y) Usa o elemento fornecido para atualizar o feedback de arrastar, substituindo qualquer feedback especificado anteriormente. |
| 9 |
dataTransfer.addElement (elemento) Adiciona o elemento fornecido ao lista de elementos usados para renderizar o feedback de arrastar. |
Processo de arrastar e soltar
A seguir estão as etapas a serem realizadas para implementar a operação Arrastar e Soltar –
Etapa 1 – Tornando um objeto arrastável
Aqui estão as etapas a serem seguidas –
-
Se você deseja arrastar um elemento, você precisa definir o atributo draggable como true para esse elemento.
-
Defina um ouvinte de evento para dragstart que s corta os dados que estão sendo arrastados.
-
O dragstart do ouvinte de evento definirá os efeitos permitidos (copiar, mover, vincular ou alguma combinação).
A seguir está o exemplo para tornar um objeto arrastável –
Isso produzirá o seguinte resultado –
Etapa 2 – Soltando o objeto
Para aceitar uma queda, o destino de soltar deve ouvir pelo menos três eventos.
-
O evento dragenter, que é usado para determinar se o alvo de soltar deve ou não aceitar a queda . Se o drop for aceito, então este evento deve ser cancelado.
-
O evento dragover, que é usado para determinar qual feedback deve ser mostrado ao usuário. Se o evento for cancelado, o feedback (normalmente o cursor) é atualizado com base no valor do atributo dropEffect.
-
Finalmente, o evento drop, que permite o descarte real a ser realizada.
A seguir está o exemplo para soltar um objeto em outro objeto –
Isso produzirá o seguinte resultado –