Arrastar e soltar

A funcionalidade do tipo "arrastar e soltar" é algo que os usuários de computador dão como certo e acham que "basicamente funciona", e há algumas formas de habilitá-la no navegador. O Windows Internet Explorer 9 e as versões anteriores do Windows Internet Explorer dão suporte ao objeto dataTransfer e a eventos para arrastar imagens, links e texto. O Internet Explorer 10 adiciona suporte para o atributo draggable, que faz com que qualquer elemento HTML que você aplique possa ser arrastado na página. O Internet Explorer 10 também adiciona o atributo files ao objeto dataTransfer, que permite o suporte do tipo "arrastar e soltar" para um ou mais arquivos da área de trabalho para uma página da Web.

O atributo draggable

Usando o atributo draggable, você faz com que qualquer elemento HTML possa ser arrastado na página. Ele fornece os estados a seguir.

KeywordDescrição

true

O conteúdo pode ser arrastado.

false

O conteúdo não pode ser arrastado.

auto

O conteúdo assume o comportamento padrão do navegador (texto, links e imagens podem ser arrastados; outros elementos não podem).

 

Por exemplo, o código de exemplo a seguir permite que o usuário arraste elementos pela tela.


<button id="mybutton" draggable="true">Drag me</button>
<img src="photo.png" draggable="true" />
<div id="mydiv" draggable="true">Moveable text</div>


Quando um usuário arrasta um elemento arrastável, o Internet Explorer 10 mostra uma imagem fantasma que se movimenta junto com o cursor conforme ele é arrastado. O atributo draggable não é herdado, de modo que os filhos de um elemento não são automaticamente arrastáveis.

O atributo files do objeto dataTransfer

A adição do atributo files ao objeto dataTransfer permite arrastar arquivos de pastas ou da área de trabalho para uma página da Web. Isso pode simplificar a criação de programas como um cliente de email em que você pode arrastar anexos para uma mensagem ou adicionar fotos em uma página de galeria.

A combinação de ouvinte de eventos e função "dropHandler" a seguir mostra como criar uma área para a qual o usuário possa arrastar um arquivo. O item "dropspot" pode ser um div, um img ou outro elemento da página. Os eventos dragover e drop usam a nossa função "doNothing" para impedir o tratamento e a propagação padrão do evento, pois isso poderia ter resultados imprevisíveis.


// this function runs when the page loads to set up the drop area
function init() 
{
  // Set the drop-event handlers.
  var dropArea = document.getElementById("dropspot");
  dropArea.addEventListener("drop", dropHandler, false);
  dropArea.addEventListener("dragover", doNothing(event), false);
}
function dropHandler(event)
{
  // Use our doNothing() function to prevent default processing. 
  doNothing(event);
  // Get the file(s) that are dropped.
  var filelist =  event.dataTransfer.files;
  if (!filelist) return;  // if null, exit now
  var filecount = filelist.length;  // get number of dropped files

  if (filecount > 0) 
  {
    // Do something with the files.         
  } 
}
// Prevents the event from continuing so our handlers can process the event.
function doNothing(event)
{
  event.stopPropagation();
  event.preventDefault();
}


Referência de API

dataTransfer
DragEvent
draggable

Amostras e tutoriais

Exemplo de arrastar e soltar em HTML5

Demonstrações do Test Drive do Internet Explorer

Magnetic Poetry

Postagens no blog do IE

Arrastar e soltar em HTML5 no IE10 PPB2

Especificação

HTML5: Seção 7.7

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.