HTML5 拖放

拖放

拖放是一种常见的特性,也就是抓取一个对象放进另一个对象。

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


浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释:在 Safari 5.1.2 中不支持拖放。


示例


示例代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>轻读(read.52mdmx.cn)</title>
</head>
<body>
<div style="border:1px solid #ccc;overflow:hidden;" ondrop="drop(event)" ondragover="allowDrop(event)">
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:400px;height:400px;background:pink;float:left;"></div>
	<div id="drag1" draggable="true" ondragstart="drag(event)" style="width:100px;height:100px;background:red;float:left;"></div>
</div>
<script type="text/javascript">
function allowDrop(ev){
	ev.preventDefault();
	console.log(ev);
}
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>
</body>
</html>


事件解释

首先,为了使元素可拖动,把 draggable 属性设置为 true 。

拖动开始时会触发被拖动元素的ondragstart事件,我们可以在触发ondragstart事件时记录被拖动对象的id。

拖动结束时会触发投放区的ondrop事件,我们可以在触发ondrop事件时把被拖拽元素追加到投放区。

当被拖拽元素进入投放区会触发ondragover事件,通过ondragover事件我们可以知道被拖拽的偏移量等信息,进行更多的操作。


事件

拖动事件 描述
dragstart 在元素开始被拖动时触发
dragend 在拖动操作完成时触发
drag 在元素被拖动时触发
释放区事件 描述
dragenter 被拖动元素进入到释放区时触发
dragover 当被拖动元素在释放区内移动时触发
dragleave 当被拖动元素没有放下就离开释放区时触发
drop 当被拖动元素在释放区里放下时触发

注意:浏览器可能会阻止ondrop事件,我们必须在ondrapover中阻止默认行为

上一篇:HTML5 音频进阶 下一篇:HTML5 画布