Drag-n-drop e correção ortográfica

Drag and Drop

A API de Drag and Drop é relativamente simples. Basicamente, inserir o atributo draggable="true" num elemento o torna arrastável. E há uma série de eventos que você pode tratar. Os eventos do objeto sendo arrastado são:

dragstart: O objeto começou a ser arrastado. O evento que a função recebe tem um atributo target, que contém o objeto sendo arrastado.
drag: O objeto está sendo arrastado
dragend: A ação de arrastar terminou

O objeto sobre o qual outro é arrastado sofre os seguintes eventos:

dragenter: O objeto sendo arrastado entrou no objeto target
dragleave: O objeto sendo arrastado deixou o objeto target
dragover: O objeto sendo arrastado se move sobre o objeto target
drop: O objeto sendo arrastado foi solto sobre o objeto target

Detalhes importantes:

A ação padrão do evento dragover é cancelar a ação de dragging atual. Assim, nos objetos que devem receber drop, é preciso setar uma ação de dragover com, no mínimo, return false.

Seleções de texto são automaticamente arrastáveis, não precisam do atributo draggable. E se você quiser criar uma área para onde seleções de texto possam ser arrastadas, basta tratar esses mesmos eventos.

Por fim, todas funções de tratamento de evento de drag recebem um objeto de evento que contém uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operação de drag.

Arquivo: exemplos/10/drag.html

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
  5 <title>HTML5 Drag and drop demonstration</title>
  6 <style type="text/css">
  7 #boxA, #boxB { 
  8   float:left; width:100px; height:200px; padding:10px; margin:10px; font-size:70%;
  9 }
 10 #boxA { background-color: blue; }
 11 #boxB { background-color: green; }
 12 
 13 #drag, #drag2 {
 14   width:50px; padding:5px; margin:5px; border:3px black solid; line-height:50px; 
 15 }
 16 #drag { background-color: red;}
 17 #drag2 { background-color: orange;}
 18 </style>
 19 <script type="text/javascript">
 20 
 21 // Quando o usuário inicia um drag, guardamos no dataset do evento 
 22 // o id do objeto sendo arrastado
 23 function dragStart(ev) {
 24     ev.dataTransfer.setData("ID", ev.target.getAttribute('id'));
 25 }
 26 
 27 // Quando o usuário arrasta sobre um dos painéis, retornamos
 28 // false para que o evento não se propague para o navegador, o
 29 // que faria com que o conteúdo fosse selecionado.
 30 function dragOver(ev) { return false; }
 31 
 32 // Quando soltamos o elemento sobre um painel, movemos o
 33 // elemento, lendo seu id do dataset do evento
 34 function dragDrop(ev) {
 35     var idelt = ev.dataTransfer.getData("ID");
 36     ev.target.appendChild(document.getElementById(idelt));
 37 }
 38 
 39 </script>
 40 </head>
 41 <body>
 42     <!-- Painel 1 -->
 43     <div id="boxA"
 44         ondrop="return dragDrop(event)"
 45         ondragover="return dragOver(event)">
 46         <!-- Draggable 1 -->
 47         <div id="drag" draggable="true"
 48             ondragstart="return dragStart(event)">drag me</div>
 49         <!-- Draggable 2 -->
 50         <div id="drag2" draggable="true"
 51             ondragstart="return dragStart(event)">drag me</div>
 52     </div>
 53 
 54     <!-- Painel 2 -->
 55     <div id="boxB"
 56         ondrop="return dragDrop(event)"
 57         ondragover="return dragOver(event)">
 58     </div>
 59 
 60 </body>
 61 </html>

Exemplo

Segue um exemplo de drag-and-drop, baseado no excelente exemplo de Laurent Jouanneau (http://ljouanneau.com/lab/html5/demodragdrop.html).

Revisão ortográfica e gramatical

Os agentes de usuário podem oferecer recursos de revisão ortográfica e gramatical, dependendo do que houver disponível em cada plataforma. Os desenvolvedores podem controlar o comportamento dessa ferramenta através do atributo spellcheck. Inserir spellcheck="true" num elemento faz com que a revisão esteja habilitada para ele. Você também pode desabilitar a revisão para determinado elemento, inserindo spellcheck="false".