Como usar o arrastar e soltar do HTML5

Por muito tempo existem funções JavaScript que nos permitem criar interfaces de arrastar e soltar, mas nenhuma dessas implementações era nativa para o navegador.

Em HTML5, temos um método nativo de criar interfaces de arrastar e soltar (com uma pequena ajuda do JavaScript).

Eu vou deixar você saber como conseguir isso ...

Suporte de Navegador

Eu gostaria de tirar isso do caminho antes de progredirmos: atualmente o arrastar e soltar HTML5 é suportado por todos os principais navegadores de desktop (incluindo o IE (até mesmo o IE 5.5 tem suporte parcial)) mas atualmente não é suportado por nenhum dos dispositivos móveis populares. navegadores.

Arrastar e soltar eventos

Em cada estágio da operação de arrastar e soltar, um evento diferente é acionado para que o navegador saiba qual código JavaScript executar; os eventos são:

dragStart: dispara quando o usuário começa a arrastar o elemento.
dragEnter: é acionado quando o elemento arrastável é arrastado pela primeira vez sobre o elemento de destino.
dragOver: é acionado quando o mouse é movido sobre um elemento quando o arrasto está ocorrendo.
dragLeave: acionado se o cursor do usuário deixar um elemento ao arrastar.
Arrastar: dispara toda vez que movemos o mouse durante o arrasto do nosso elemento.
drop: disparada quando a queda real é executada.
dragEnd: é acionado quando o usuário libera o mouse enquanto arrasta o objeto.

Com todos esses ouvintes de eventos, você tem muito controle sobre como sua interface funciona e como ela se comporta de maneira precisa em diferentes circunstâncias.

O objeto dataTransfer

É aqui que toda a magia de arrastar e soltar acontece; este objeto contém os dados que foram enviados pela operação de arrastar. Os dados podem ser definidos e recuperados de várias maneiras, os mais importantes são:

dataTransfer.effectAllowed = value: retorna os tipos de ação permitidos, os valores possíveis são none, copy, copyLink, copyMove, link, linkMove, move, todos e não inicializados.
dataTransfer.setData (format, data): adiciona os dados especificados e seu formato.
dataTransfer.clearData (format): limpa todos os dados para um formato específico.
dataTransfer.setDragImage (element, x, y): define a imagem que você deseja arrastar, os valores x e y especificam onde o cursor do mouse deve estar (0, 0 irá colocá-lo no canto superior esquerdo).
data = dataTransfer.getData (format): Como o nome diz, retorna os dados disponíveis para um formato específico.

Criando um exemplo de arrastar e soltar

Agora vamos começar a criar nossos arrastar e soltar simples, você pode ver que temos dois pequenos divs e um maior, podemos arrastar e soltar os pequenos dentro do grande e podemos até mesmo movê-los de volta.

Arrastando o objeto

A primeira coisa que precisamos fazer é criar nosso HTML. Tornamos os divs arrastáveis com o atributo arrastável, assim:

draggable="true">

Quando isso é feito, precisamos definir a função javascript que será executada quando começarmos a arrastar este elemento:

function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));   ev.dataTransfer.setDragImage(ev.target,100,100);return true;}

Nesse código, primeiro declaramos que tipo de efeito permitimos na operação e definimos que para mover, na segunda linha, definimos os dados para a operação e, nesse caso, o tipo é Text e o valor é o ID do elemento. estamos arrastando. Depois disso, usamos o método setDragImage para definir o que estaremos arrastando e, em seguida, onde o cursor estará ao arrastar, e como os cubos são 200 por 200px, coloquei isso no centro. Finalmente retornamos a verdade.

Soltando o objeto

Para que um elemento aceite um drop, ele precisa ouvir 3 eventos diferentes: dragEnter, dragOver e também drop event, então vamos adicionar isso ao nosso html no div com o ID de big:

Agora que adicionamos ouvintes de eventos, precisamos criar essas funções que iniciaremos pelos eventos dragenter e dragover:

function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}

Na primeira função, definimos o que queremos que aconteça quando o elemento que estamos arrastando alcança o elemento que deve ser descartado. Nesse caso, evitamos apenas o comportamento padrão do navegador, mas você pode fazer qualquer número de coisas, como alterar o fundo ou adicionar algum texto para indicar que o usuário está arrastando para a área correta e usando o evento dragleave, você pode reverter as alterações feitas. Em seguida, na função dragOver , simplesmente impedimos que o padrão permita a queda.

A próxima parte é onde definimos a função para quando realmente soltamos o elemento no destino desejado:

function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}

Nesta última parte, primeiro definimos uma variável chamada data na qual obtemos todos os dados que estão disponíveis para o formato de texto e, em seguida, anexamos esses dados (que serão o elemento que estamos arrastando) para a div onde desejamos eliminar o elemento. Finalmente, alguns toques finais como parar a propagação e também retornar false.

Tornando a seção um alvo de queda

Verificação a demonstração , você pode ver que também nos certificamos de que os dois divs poderiam ser arrastados de volta ao local original. Felizmente, adicionar outro alvo de queda pode ser mais simples do que você imagina; porque as funções já estão no lugar, tudo o que temos a fazer é adicionar os ouvintes de eventos, da seguinte forma:

E isso é tudo o que precisamos para permitir o arrastamento dos divs para o local original.

Conclusão

Há muitos aplicativos de arrastar e soltar criados com bibliotecas JavaScript, e geralmente é mais simples usar essas bibliotecas. Mas espero que, nessa técnica de HTML5 e JavaScript, você veja o potencial futuro da solução nativa.

Você construiu uma interface de arrastar e soltar? Como o HTML5 nativo se compara a soluções JavaScript puras? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, solte a imagem via photophilde.

projeto ux