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 -