HTML5 - Arrastar e soltar

Arrastar e soltar (DnD) é um poderoso conceito de interface de usuário que torna fácil copiar, reordenar e deletar itens com a ajuda de cliques do mouse. Isso permite que o usuário clique e segure o botão do mouse sobre um elemento, arraste-o para outro local e solte o botão do mouse para soltar o elemento lá.

Para alcançar a funcionalidade de arrastar e soltar com o HTML4 tradicional, os desenvolvedores teriam que usar programação JavaScript complexa ou outras estruturas JavaScript como jQuery etc.

Agora o HTML 5 veio com uma API Drag and Drop (DnD) que traz suporte nativo a DnD para o navegador, tornando-o muito mais fácil de codificar.

HTML 5 DnD é compatível com todos os principais navegadores como Chrome, Firefox 3.5 e Safari 4, etc.

Arrastar e soltar eventos

Existem vários eventos que são disparados durante vários estágios da operação de arrastar e soltar. Esses eventos estão listados abaixo -

Sr. Não.	Eventos e Descrição
1	dragstart Dispara quando o usuário começa a arrastar o objeto.
2	dragenter Disparado quando o mouse é movido pela primeira vez sobre o elemento de destino enquanto ocorre um arrasto. Um ouvinte para este evento deve indicar se um drop é permitido neste local. Se não houver ouvintes, ou se os ouvintes não executarem nenhuma operação, um descarte não será permitido por padrão.
3	dragover Este evento é disparado quando o mouse é movido sobre um elemento quando um arrasto está ocorrendo. Na maior parte do tempo, a operação que ocorre durante um ouvinte será a mesma do evento dragenter.
4	dragleave Este evento é disparado quando o mouse sai de um elemento enquanto um arrasto está ocorrendo. Os ouvintes devem remover todos os marcadores de realce ou inserção usados para feedback de queda.
5	drag Dispara sempre que o mouse é movido enquanto o objeto está sendo arrastado.
6	drop O evento de soltar é disparado no elemento onde o soltar ocorreu no final da operação de arrastar. Um ouvinte seria responsável por recuperar os dados que estão sendo arrastados e inseri-los no local de soltar.
7	dragend Dispara quando o usuário libera o botão do mouse enquanto arrasta um objeto.

Note- Observe que apenas eventos de arrastar são disparados; eventos de mouse, como mousemove, não são disparados durante uma operação de arrastar.

O objeto DataTransfer

Os métodos de ouvinte de evento para todos os eventos de arrastar e soltar aceitam Event objeto que tem um atributo somente leitura chamado dataTransfer.

o event.dataTransfer retorna DataTransfer objeto associado ao evento da seguinte forma -

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

O objeto DataTransfer contém dados sobre a operação de arrastar e soltar. Esses dados podem ser recuperados e definidos em termos de vários atributos associados ao objeto DataTransfer conforme explicado abaixo -

Sr. Não.	Atributos do DataTransfer e sua descrição
1	dataTransfer.dropEffect [ = value ] Retorna o tipo de operação atualmente selecionada. Este atributo pode ser definido para alterar a operação selecionada. Os valores possíveis são none, copy, link e move.
2	dataTransfer.effectAllowed [ = value ] Retorna os tipos de operações que devem ser permitidas. Este atributo pode ser definido para alterar as operações permitidas. Os valores possíveis são none, copy, copyLink, copyMove, link, linkMove, move, all e uninitialized.
3	dataTransfer.types Retorna um DOMStringList listando os formatos que foram definidos no evento dragstart. Além disso, se algum arquivo estiver sendo arrastado, um dos tipos será a string "Arquivos".
4	dataTransfer.clearData ( [ format ] ) Remove os dados dos formatos especificados. Remove todos os dados se o argumento for omitido.
5	dataTransfer.setData(format, data) Adiciona os dados especificados.
6	data = dataTransfer.getData(format) Retorna os dados especificados. Se não houver esses dados, retorna a string vazia.
7	dataTransfer.files Retorna uma FileList dos arquivos sendo arrastados, se houver.
8	dataTransfer.setDragImage(element, x, y) Usa o elemento fornecido para atualizar o feedback de arrastar, substituindo qualquer feedback especificado anteriormente.
9	dataTransfer.addElement(element) Adiciona o elemento fornecido à lista de elementos usados para renderizar o feedback do arrasto.

Processo de arrastar e soltar

A seguir estão as etapas a serem realizadas para implementar a operação de arrastar e soltar -

Etapa 1 - Tornando um objeto arrastável

Aqui estão as etapas a serem seguidas -

Se você deseja arrastar um elemento, você precisa definir o draggable atribuir a true para esse elemento.
Definir um ouvinte de evento para dragstart que armazena os dados sendo arrastados.
O ouvinte do evento dragstart irá definir os efeitos permitidos (copiar, mover, vincular ou alguma combinação).

A seguir está o exemplo para tornar um objeto arrastável -

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Etapa 2 - Soltando o objeto

Para aceitar uma queda, o alvo da queda precisa ouvir pelo menos três eventos.

o dragenter, que é usado para determinar se o destino de soltar deve ou não aceitar a queda. Se a entrega for aceita, este evento deve ser cancelado.
o dragover, que é usado para determinar qual feedback deve ser mostrado ao usuário. Se o evento for cancelado, o feedback (normalmente o cursor) será atualizado com base no valor do atributo dropEffect.
finalmente, o drop evento, que permite que a queda real seja realizada.

A seguir está o exemplo para soltar um objeto em outro objeto -

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

Isso produzirá o seguinte resultado -