HTML5 拖拽

« 上一节

拖拽是HTML5标准的一部分.

拖动W3xuexi图片到矩形框内.

拖拽

拖拽是经常应用的特性.你可以"抓住"一个对象将其拖动到不同的位置.

在HTML5中，拖拽是标准的一部分,任何元素都可以拖拽.

浏览器支持

IE9+, 火狐, 欧朋, 谷歌, 苹果浏览器都支持拖拽.

注意: 拖拽不能再苹果浏览器5.1.2版本中使用.

HTML5拖拽的例子

下面是简单的拖拽例子:

例子

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

亲自试一试 »

看起来很复杂，我们可以通过不同的拖拽事件逐个了解.

创建一个拖拽元素

首先: 创建一个拖拽元素, draggable属性为true:

拖拽什么 - ondragstart 和 setData()

然后,指定元素拖时会发生什么.

上面的例子中，ondragstart属性调用一个方法drag(event),来指定被拖动的数据.

数据转换.setData()设置数据类型和拖动数据的值:

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

在这个例子中, 数据类型是"文本"类型，并且值是拖拽元素的id("drag1").

拖拽到哪儿 - 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("Text")方法，获取拖动数据. 这个方法会返回在setData()中，设置相同类型的任何数据
拖动数据是拖动元素的id ("drag1")
追加拖动元素到降落元素中

HTML5教程

HTML5表单

HTML5 图像

HTML5 多媒体

HTML5 接口

HTML5 测试