Drag and Drop
O Drag and Drop (Arrastar e Soltar) é um API (Interface de Programação de Aplicativos) simples, como uma série de eventos que podem ser abordados. Ao inserir o atributo draggable=”true” em um elemento, ele se torna arrastável.
Os eventos do objeto sendo arrastado são:
- dragstart – O objeto começou a ser arrastado.
- drag – O objeto está sendo arrastado.
- dragend – O objeto parou de ser arrastado.
O evento recebido pela função tem o atributo “target”, que contém o objeto sendo arrastado.
Os eventos do objeto sobre o qual outro está sendo arrastado:
- dragenter – O objeto sendo arrastado entrou no objeto “target”
- dragleave – O objeto sendo arrastado saiu do objeto “target”
- dragover – O objeto sendo arrastado está se movendo sbre o objeto “target”
- drop – O objeto sendo arrastado foi solto sobre o objeto “target”
Por padrão, a ação o evento dragover é cancelar a ação de um draggin atual. Assim, os objetos que irão receber o drop precisam setar uma ação de dragover com, no mínimo, return false.
Seleções de texto são automaticamente arrastáveis, não necessitando do atributo draggable. Se quiser criar uma área para onde seleções de texto possam ser arrastadas, basta tratar os mesmos eventos. Todas as 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.
Exemplo:
<!DOCTYPE HTML>
<html>
<head>
<meta content=”text/html; charset=UTF-8” http-equiv=”content-type”/>
<title>HTML5 Drag and drop demonstration</title>
<style type=”text/css”>
#boxA, #boxB {
float:left; width:100px; height:200px; padding:10px; margin:10px;
font-size:70%;
}
#boxA { background-color: blue; }
#boxB { background-color: green; }
#drag, #drag2 {
width:50px; padding:5px; margin:5px; border:3px black solid;
line-height:50px;
}
#drag { background-color: red;}
#drag2 { background-color: orange;}
</style>
<script type=”text/javascript”>
// Quando o usuário inicia um drag, guardamos no dataset do evento
// o id do objeto sendo arrastado
function dragStart(ev) {
ev.dataTransfer.setData(“ID”, ev.target.getAttribute(‘id’));
}
// Quando o usuário arrasta sobre um dos painéis, retornamos
// false para que o evento não se propague para o navegador, o
// que faria com que o conteúdo fosse selecionado.
function dragOver(ev) { return false; }
// Quando soltamos o elemento sobre um painel, movemos o
// elemento, lendo seu id do dataset do evento
function dragDrop(ev) {
35 var idelt = ev.dataTransfer.getData(“ID”);
36 ev.target.appendChild(document.getElementById(idelt));
}
</script>
</head>
<body>
<!-- Painel 1 -->
<div id=”boxA”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
<!-- Draggable 1 -->
<div id=”drag” draggable=”true”
ondragstart=”return dragStart(event)”>drag me</div>
<!-- Draggable 2 -->
<div id=”drag2” draggable=”true”
ondragstart=”return dragStart(event)”>drag me</div>
</div>
<!-- Painel 2 -->
<div id=”boxB”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>
</body>
</html>
Não há mistério no uso da função Drag and Drop. Apesar da utilização não ser tão comum, o código é bem simples. Veja um exemplo da utilização de Drag and Drop no HTML5 (Pode não funcionar em alguns navegadores).
Correção Ortográfica
Os browsers e os demais agentes de usuários podem fornecer recursos de correção ortográfica e gramatical, dependendo da disponibilidade em cada plataforma. Podemos controlar o uso dessa ferramenta através do atributo spellcheck. Inserir spellcheck=”true” habilita a revisão automática no elemento. É possível desativar a revisão para um determinado elemento usando o spellcheck=”false”.
Exemplo:
<p spellcheck="true">Seu texto aqui.</p>
