HTML5 Drag and Drop (Português)

do HTML5 é possível arrastar e largar elementos HTML dentro de uma página HTML. Através de ouvintes de eventos JavaScript você pode decidir o que acontece quando o usuário arrasta e drops elementos.

durante o arrasto e a largada, os elementos HTML podem assumir duas funções:

1. Draggable
2. Drop target / drop zone.

o elemento draggable é o elemento que o Usuário deve ser capaz de arrastar em torno da página HTML e cair em algum lugar, para que alguma ação ocorra. Este pode ser um ou mais elementos.,

o alvo ou a zona de queda é o elemento sobre o qual os elementos draggable são largados.

eventos de arrastamento e largada

para controlar o que acontece ao arrastar e largar elementos HTML, você precisa realizar 3 passos:

1. configure os elementos HTML para draggable.,
2. Anexar ouvintes de eventos para o arrastáveis elementos HTML
3. Anexar ouvintes de eventos para o destino de soltar elementos HTML

Os eventos e atributos são ilustrado a seguir:

Primeiro você defina o draggable="true" o atributo do elemento HTML(s) para tornar arrastáveis.

Second you attaching event listeners on the draggable element for the dragstart and dragend events., Dentro destes ouvintes de Eventos você pode implementar o que está para acontecer quando o usuário começa a arrastar o elemento, e quando o arrastamento termina.

hird you attach event listeners on the drop target element. Os eventos que você pode ouvir são dragenter dragover dragleave e drop.

O evento é disparado quando o utilizador arrasta o dispositivo para o alvo da queda., Este evento só dispara quando o elemento draggable muda de estar fora para estar sobre, o que é normalmente determinado pela posição do cursor do mouse.

Uma vez que o elemento draggable está sobre o alvo de queda, o dragover dispara, e continua a disparar enquanto o elemento draggable está a ser arrastado sobre o alvo de queda.

Se o utilizador arrastar o objecto draggable para fora do alvo da gota de novo, O dragleave evento é disparado.

Se o utilizador largar o objecto draggable no alvo da gota, o drop evento é disparado.,

arraste e largue exemplo de Evento

Aqui está um exemplo com o qual você pode brincar. Tente arrastar o logótipo HTML5 para o alvo e ver o que acontece. Tente tirar a imagem e arrastá-la de novo.

Arrastar e Soltar Código

Vamos dar uma olhada em como lidar com o arrastar e soltar eventos., Para ver que primeiro criaremos um elemento <img> que podemos arrastar. Aqui está o código HTML para que:

<img src="http://tutorials.jenkov.com/html5/..." draggable="true">

Uma vez que temos um elemento draggable precisamos de um alvo drop. Usarei um elemento <div>:

<div style="width: 200px; height: 200px;">Drop here</div>

Uma vez que tenhamos o elemento draggable e o elemento alvo drop, precisamos anexar os ouvintes de eventos., Aqui está o código de JavaScript para que:

o dragStart() a função chamaevent.dataTransfer.setData() a fim de definir os dados que são transferidos para o alvo da gota quando o elemento é descartado. Quaisquer dados que você precisa para terminar corretamente a ação drop, defina-o aqui. Você define os dados e seu tipo mime.

the dragOver () and drop() os manipuladores de eventos ambos chamam event.preventDefault() e return false. Isto é necessário para fazer o arrasto e gota funcionar corretamente., O navegador pode ter algum comportamento padrão de arrastamento e largada que você precisa desativar para fazer o seu código funcionar.

Notice also that thedrop() event handler function reads the data set indragStart() via the call toevent.dataTransfer.getData(). Ele passa o tipo mime dos dados como parâmetro para extraí-lo corretamente.

isto é tudo o que é necessário para implementar drag and drop no HTML5. Você pode torná-lo um pouco mais visualmente agradável, como veremos na próxima seção.,

Feedback Visual

pode usar as funções de tratamento de eventos de arrasto e largada para dar ao Utilizador um feedback visual mais explícito.

Em primeiro lugar, você pode marcar o elemento sendo arrastado para que o usuário possa ver qual elemento ele ou ela está arrastando. Se vários elementos parecem os mesmos e todos eles podem ser arrastados, é bom para o Usuário ver qual está sendo arrastado. Você pode fazê-lo em resposta ao evento dragstart. Aqui está um exemplo:

Uma vez que o arrasto termina, queremos remover o contorno novamente, no entanto., Isto é feito em resposta ao evento dragend. Aqui está como isso é feito:

Agora o usuário vai obter feedback visual mostrando qual elemento está sendo arrastado.

também queremos mostrar ao utilizador que é possível largar o elemento draggable quando este é arrastado sobre o alvo de queda. Mais uma vez mudaremos a fronteira do elemento. Faremos isso em resposta ao id

,dragleaveedropeventos., Aqui está como isso é feito:

Agora a borda do alvo de gota vai se tornar verde e rasgado quando o elemento draggable é arrastado sobre ele. A borda será removida quando o elemento draggable for arrastado para fora outra vez,ou se o elemento for deixado cair no alvo drop.

o exemplo acima não mostrou a funçãodragOver() manipulador de eventos, mas certifique-se que a adiciona para evitar o comportamento por omissão do navegador.,

Aqui está o código completo após o feedback visual foi adicionado:

O Objeto DataTransfer, effectsAllowed, dropEffect e setDragImage()

Você pode aumentar o visual dado feedback para o usuário durante a ação de arrastar e soltar ações usando o DataTransfer objeto. O objeto DataTransfer tem 2 Atributos e uma função que você pode usar para este fim., Estas são:

• effectsAllowed
• dropEffect
• setDragImage()

Você tem acesso a DataTransfer objeto dragstart e drop objetos de evento. Aqui está um exemplo dragstart ouvinte da função que define o effectsAllowed propriedade DataTransfer objetivo:

effectsAllowed propriedade é usado pelos navegadores para alterar o cursor do mouse para mostrar que tipo de ação é executada quando arrastando e soltando um elemento., Tipicamente, o cursor do rato muda quando o elemento arrastado está sobre um alvo de largada. Não antes. Os valores válidos para effectsAllowed propriedade são:

• none
• copiar
• mover
• copyMove
• link
• linkMove
• copyLink
• todas
• não inicializada

dropEffect é suposto para mostrar ao usuário (através do cursor) o que acontece quando o mouse passa sobre um destino de largar, mas na hora de escrever (fev. 2014) os navegadores parecem ignorar isso., Os valores válidos para dropEffect propriedade são:

• none
• copiar
• link
• mover

setDragImage(image, x, y) função pode ser usada para definir a imagem mostrada pelo navegador quando o usuário arrasta um elemento. Por padrão, o navegador mostra uma cópia semi-transparente do elemento original, mas se você quiser uma imagem diferente, você pode definir uma imagem diferente usando esta função. O ey propriedades podem ser usadas para definir compensações de localização para a imagem quando apresentadas., Por omissão, o canto superior esquerdo da imagem de arrasto está localizado na ponta do cursor do rato. Ao definir diferentes x e y propriedades Você pode alterar isto. Você pode usar tanto positivo quanto negativo x e y compensações.

Aqui está um exemplo de código que mostra como definir uma imagem de arrastar dentro de dragStart() listener de eventos função:

Aqui está um exemplo que permite jogar com as várias definições sobre o DataTransfer objeto., Tente alterar o id

e arraste a imagem e veja o que acontece quando arrastar o logótipo HTML5 para baixo sobre o id

drop target.

Arrastar Arquivos Para O Navegador

é possível arrastar arquivos para o navegador do sistema de arquivos, e ler o nome e o conteúdo da arrastado arquivos de JavaScript. Você faz isso através da API de arquivo HTML5., Aqui está um ouvinte-alvo que detecta o nome do ficheiro arrastado:

var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i 
 Notice how the 
 function does not call the 
 function, but instead accesses the 
 property of the 
. The 
 property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon).
 You can read more about how to access the dragged files in my HTML5 file API tutorial.