Esta página foi útil?
Seus comentários sobre este conteúdo são importantes. Queremos saber sua opinião.
Comentários adicionais?
1500 caracteres restantes
Usando JavaScript para controlar o objeto de audio9
Collapse the table of content
Expand the table of content

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. Suporte do Internet Explorer 10 adicionado ao atributo draggable e à propriedade DataTransfer.files, que possibilita o suporte ao recurso arrastar e soltar de um ou mais arquivos a partir da área de trabalho para uma página da Web.

O Microsoft Edge apresenta o suporte para o modelo mais atual de arrastar e soltar do W3C, em que um objeto DataTransferItemList (acessado por meio da propriedade DataTransfer.items) atua como o armazenamento de dados da operação de arrastar. Também ainda há suporte para as APIs para arrastar e soltar herdadas que foram mencionadas acima. Para saber mais, confira Arrastar e soltar novo e herdado.

O atributo draggable

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

Palavra-chaveDescriçã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).

 

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 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, 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.items
DataTransferItem
DataTransferItemList
DataTransfer
DragEvent
draggable

Demonstrações do Test Drive do Internet Explorer

Magnetic Poetry

Postagens no blog do IE

IE11: navegação por toque para a Web de hoje e do futuro
Arrastar e soltar em HTML5 no IE10 PPB2

Especificação

HTML 5.1: seção 5.7

 

 

Mostrar:
© 2015 Microsoft