API de arrastar e soltar HTML
Em HTML, qualquer elemento pode ser arrastado e solto.
Exemplo
Arraste a imagem W3Schools para o retângulo.
Arraste e Solte
Arrastar e soltar é um recurso muito comum. É quando você "pega" um objeto e o arrasta para um local diferente.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente arrastar e soltar.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Exemplo de arrastar e soltar HTML
O exemplo abaixo é um exemplo simples de arrastar e soltar:
Exemplo
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Pode parecer complicado, mas vamos passar por todas as diferentes partes de um evento de arrastar e soltar.
Tornar um elemento arrastável
Primeiro de tudo: Para tornar um elemento arrastável, defina o draggableatributo como true:
<img draggable="true">
O que arrastar - ondragstart e setData()
Em seguida, especifique o que deve acontecer quando o elemento for arrastado.
No exemplo acima, o ondragstartatributo chama uma função, drag(event), que especifica quais dados serão arrastados.
O dataTransfer.setData()método define o tipo de dados e o valor dos dados arrastados:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
Nesse caso, o tipo de dados é "texto" e o valor é o id do elemento arrastável ("drag1").
Onde cair - ondragover
O ondragoverevento especifica onde os dados arrastados podem ser soltos.
Por padrão, dados/elementos não podem ser descartados em outros elementos. Para permitir uma queda, devemos evitar a manipulação padrão do elemento.
Isso é feito chamando o event.preventDefault()método para o evento ondragover:
event.preventDefault()
Faça o Drop - ondrop
Quando os dados arrastados são soltos, ocorre um evento de soltar.
No exemplo acima, o atributo ondrop chama uma função, drop(event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Código explicado:
- Chame preventDefault() para evitar que o navegador manipule os dados por padrão (o padrão é aberto como link ao soltar)
- Obtenha os dados arrastados com o método dataTransfer.getData(). Este método retornará todos os dados que foram definidos para o mesmo tipo no método setData()
- Os dados arrastados são o id do elemento arrastado ("drag1")
- Anexar o elemento arrastado no elemento soltar
Mais exemplos
Exemplo
Como arrastar (e soltar) uma imagem para frente e para trás entre dois elementos <div>: