HTML5 拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

HTML5 拖放（Drag 和 Drop）

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

将 oldtoolbag.com ícone arrastar para dentro da caixa retangular.

拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, e Safari suportam arrastar e soltar.

注意:Safari 5.1.2不支持拖动.

HTML5 拖放示例

下面的示例是一个简单的拖放示例：

在线示例

示例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>
<style type="text/css">
#div1　{width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
<p>Arraste oldtoolbag.com arraste a imagem para a caixa retangular:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1"src="/static/images/logo-n.png" draggable="true" ondragstart="drag(event)" width="336"height="69">
</body>
</html>

Teste e veja ‹/›

Pode parecer um pouco complexo, mas podemos estudar separadamente as diferentes partes dos eventos de arraste e soltura.

Definir o elemento como arrastável

Primeiro, para tornar o elemento arrastável, defina a propriedade draggable como true:

　　　　 <img draggable="true">

O que arrastar - ondragstart e setData()

Em seguida, define o que acontece quando o elemento é arrastado.

No exemplo acima, a propriedade ondragstart chama uma função, drag(event), que define os dados arrastados.

O método dataTransfer.setData() define o tipo de dados e o valor dos dados arrastados:

　　　　 function drag(ev)
{
　　　　ev.dataTransfer.setData("Text", ev.target.id);
}

Text é um DOMString que representa o tipo de dados arrastados a serem adicionados ao objeto de arraste. O valor é o id do elemento arrastável ("drag1")}

Colocar onde - ondragover

O evento ondragover determina onde os dados arrastados devem ser colocados.

Por padrão, os dados/O elemento é colocado dentro de outro elemento. Se precisarmos permitir a colocação, devemos impedir o tratamento padrão do elemento.

Isso deve ser feito chamando o método event.preventDefault() do evento ondragover:

event.preventDefault()

Realizar a colocação - ondrop

Ocorre um evento drop quando dados arrastados são colocados.

No exemplo acima, a propriedade ondrop chama uma função, drop(event):

　 function drop(ev)
{
　　　　ev.preventDefault();
　　　　var data = ev.dataTransfer.getData("Text");
　　　　ev.target.appendChild(document.getElementById(data));
}

Explicação do Código:

Chame preventDefault() para evitar o processamento padrão do navegador dos dados (o comportamento padrão do evento drop é abrir os dados como links)
Obter os dados arrastados usando o método getDataTransfer.getData("Text"). Este método retornará qualquer dados do tipo configurado no método setData().
Os dados arrastados são o id do elemento arrastado ("drag1)
Adicionar o elemento arrastado ao elemento de destino (elemento alvo)

Mais Exemplos

HTML5Arrastar e soltar imagens de ida e volta
Como arrastar e soltar imagens entre dois elementos <div>.

HTML5 Geolocalização HTML5 MathML

HTML5 Tutoriais Básicos

HTML5 API

HTML5 媒体

HTML5 图形