Como criar o evento Drag and Drop em HTML5

Por um longo tempo as funções JavaScript nos permitem criar interfaces de arrastar e soltar (Drag And Drop), mas nenhuma dessas implementações eram nativas para o navegador. Com HTML5, foi encontrado um método nativo de criar interfaces de arrastar e soltar (com uma pequena ajuda de JavaScript). Vamos ver como isso funciona…

Suporte ao navegador

Eu gostaria de esclarecer alguns pontos antes de seguir adiante: atualmente o HTML5 com Drag and Drop é suportado por todos os principais navegadores de desktop (incluindo o IE), mas atualmente não é suportado por nenhum browser para dispositivos móveis.

Eventos Drag And Drop

Em todas as fases da operação de Drag and Drop um evento diferente é acionado, para que o navegador saiba qual código JavaScript está sendo executado. Veja os códigos

• dragStart: é acionado quando o usuário começa a arrastar o elemento.
• dragEnter: é acionado quando o elemento é posicionado sobre o elemento alvo.
• dragOver: é acionado quando o mouse é movido sobre um elemento quando ele está sendo arrastado.
• dragLeave: é acionado quando o usuário desiste de arrastar o elemento.
• drag: é acionado enquanto o mouse é movido durante o arrastamento do elemento.
• drop: é acionado quando o movimento está realmente concluído.
• dragend: é acionado quando o usuário solta o mouse enquanto arrasta o objeto.

Objeto dataTransfer

Este é o lugar onde o Drag and Drop acontece; este objeto contém os dados que foram enviados pela operação. Os dados podem ser definidos e recuperados em diversas formas, temos abaixo as mais importantes:

• dataTransfer.effectAllowed = value: este retorna os tipos de ação permitida, os valores possíveis são none, copy, copyLink , copyMove , link, linkMove, all e uninitialized.
• dataTransfer.setData(format, data): adiciona os dados especificados e seu formato .
• dataTransfer.clearData(format): apaga todos os dados de um formato específico.
• dataTransfer.setDragImage(element, x, y): define a imagem que você deseja arrastar, os valores de x e y específicos onde o cursor do mouse deve ser (0, 0 irá colocá-lo acima à esquerda).
• data = dataTransfer.getData(format): Como o nome diz, ele retorna os dados disponíveis para um formato específico.

Criando um exemplo de Drag and Drop:

Agora vamos começar a criar o nosso exemplo simples de Drag and Drop. Você poderá ver que nós temos 3 divs, duas pequenas divs e uma maior, As divs pequenas podem ser arrastadas e soltas dentro da grande e podemos até mesmo movê-los de volta. Veja o exemplo

Arrastando o objeto

A primeira coisa que precisamos fazer é criar nosso HTML. Nós criamos as divs draggable com o atributo draggable, assim:

<div id="boxA" <strong>draggable="true"</strong>></div>

Quando isso é feito, precisamos definir a função javascript que será executada quando começamos 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;
}

Neste código primeiramente declaramos que tipo de efeito será definido na operação – move, na segunda linha determinamos os dados da operação e, neste caso, é do tipo Text e o valor é o ID do elemento que estamos arrastando . Após isso, use o método setDragImage para definir o que será arrastando e, em seguida, onde o cursor estará enquanto arrasta. Uma vez que os cubos são 200 por 200px eu coloquei no próprio centro. Por fim, retornamos True.

Soltando o objeto

Para soltar um elemento ele precisará 3 event listeners: dragEnter, dragOver e também o evento drop então vamos adicionar isso ao nosso html na div com o ID “big”:

<div id="big" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
</div>

Agora que nós adicionamos os event listeners, precisamos criar essas funções, vamos começar pelos eventos dragenter e dragover:

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

Na primeira função definimos o que acontece quando o elemento que está sendo arrastado atinge o elemento onde deveria ser soltado. Em seguida, a função do dragOver permite o Drop .

A próxima parte é onde definimos a função para quando nós realmente largarmos o elemento sobre o destino desejado:

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

<section id="section" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">