Drag and drop

Published on October 2, 2013.

Este é um exemplo de como implementar a funcionalidade de arrastar e soltar utilizando HTML, CSS e Javascript e foi fortemente baseada nesse tutorial.

O HTML e CSS

Antes de mais nada, utilizaremos esse html <dnd-0.html> e esse css <dnd.css>.

No HTML temos draggable="true" para que o web browser saiba que o objeto pode ser movido.

No CSS temos cursor:move; apenas para indicar que o elemento poderá ser movido (neste momento ele ainda não é).

Iniciando o Drag

Para iniciar o drag precisa-se adicionar o evento dragstart aos elementos. Para isso utilizamos esse javascript <dnd-1.js> e esse html <dnd-1.html>.

Completanto o Drag (Drop)

Para realizar o drop é preciso interromper o comportamento padrão do web browser utilizando preventDefault() e stopPropagation().

Para isso utilizamos esse javascript <dnd-2.js> e esse html <dnd-2.html>.

Transferência de Dados

A propriedade dataTransfer é a responsável por toda a mágica. Ela precisa ser atribuída no dragstart e processada no drop.

Para isso utilizamos esse javascript <dnd-3.js> e esse html <dnd-3.html>.

Movimentação

A visualização da movimentação pode ser configurada com os eventos dragenter e dragleave.

Tags:

• Ftb