HTML5拖拽效果

拖放

拖放是一个非常常见的功能。用在当你“抓取”一个对象并拖动它到另一个位置时.

HTML5里, 拖放是标准的一部分：任何元素都可以拖动.

浏览器支持

表中的数字指定第一个完全支持拖放的浏览器版本.

API
Drag and Drop 4.0 9.0 3.5 6.0 12.0

HTML拖放示例

下面的例子是一个简单的拖放例子:

<!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>

让我试试

这可能看起来很复杂，但让我们通过拖放事件的所有不同部分.

让一个元素可以拖动

首先：做一个元素拖动，拖动属性设置为真:

<img draggable="true">

拖什么 - ondragstart 和 setData()

然后，指定元素拖动时应该发生什么.

在上面的实例中, ondragstart 属性调用一个函数, drag(event), 指定要拖动的数据.

dataTransfer.setData() 方法设置拖动数据的数据类型和值:

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

在这种情况下, 数据类型是 "text"并且拖动元素的id值是drag1.

拖到哪儿 - ondragover

ondragover 事件指定拖动数据可以被丢弃的位置.

默认情况下，数据/元素不能在其他元素中删除。要允许拖动，我们必须防止元素的默认处理.

在ondragover事件方法中调用event.preventDefault():

event.preventDefault()

拖动 - ondrop

当拖动的数据被拖动时,拖动事件发生.

在上面的实例中, ondrop 属性调用函数, drop(event):

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

代码解析:

  • 调用preventDefault() 为了防止浏览器默认处理数据（默认是作为链接打开）
  • 使用dataTransfer.getData()方法获得拖动数据. 此方法将返回数据和setData方法相同
  • 拖放数据元素的id是drag1
  • 将拖动的元素添加到拖动元素中