HTML5新增的拖放API(HTML5、CSS3、Javascript讲义)

HTML5新增了关于拖放的API,通过拖放API可以让HTML页面的任意元素变成可以拖动的,通过此机制可以开发出更友好的人机交互。

一、启动拖动

在HTML5中,<img.../>元素默认是可拖动的,而<a.../>元素只要设置了href属性,默认也可拖动

对于其他元素而言,只有把该元素的draggable属性设置为true即可,但它未携带数据,为了让拖动操作能携带数据,应该为被拖动元素的ondragstart事件指定监听器

<<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>可拖动的Div</title>
</head>
<body>
<div id="source" style="width: 80px; height: 80px; border: 1px solid black; background-color: #bbb;" draggable="true">疯狂教育软件</div>

<script>
	var source = document.getElementById("source");
	source.ondragstart = function(evt) {
		//让拖动携带数据
		evt.dataTransfer.setData("text/plain", "www.xxx.org");
	}
</script>
</body>
</html>

二、接受“放”操作

为了让document接受“放”,应该为document的ondragover事件指定监听器,在监听器中取消document对拖动事件的默认行为

document.ondragover = function(evt) {
  //取消事件的默认行为
  return false;
}
但Firefox和Chrome两个浏览器对此操作会有不同的反应,所以需要对document的ondrop事件设置监听器
document.ondrop = function(evt) {
  //取消事件的默认行为
  return false;
}
拖放操作相关事件

事件 事件源 描述
ondragstart 被拖动的HTML元素 开始拖动操作时触发该事件
ondrag 被拖动的HTML元素 拖动过程中会不断的触发该事件
ondragend 被拖动的HTML元素 拖动结束时触发该事件
ondragenter 拖动时鼠标经过的元素 被拖动的元素进入本元素的范围内时触发该事件
ondragover 拖动时鼠标经过的元素 被拖动的元素进入本元素的范围内拖动时会不断触发该事件
ondragleave 拖动时鼠标经过的元素 被拖动的元素离开本元素时触发该事件
ondrop 拖动时鼠标经过的元素 其他元素被放到了本元素中时触发该事件

So,如果希望实现一个自由推动的元素,只要监听document的ondrop方法,当用户把元素放到document中时,通过JS代码把该元素移动到该位置即可,代码如下:


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>可自由拖动的div</title>
</head>
<body>
<div id="source" style="width:80px;height:80px;
	border:1px solid black;
	background-color:#bbb;"
	draggable="true">疯狂教育软件</div>

<script>
	var source = document.getElementById("source");
	source.ondragstart = function(evt) {
		//让拖动携带数据
		evt.dataTransfer.setData("text/plain", "www.fkjava.org");
	}
	document.ondragover = function(evt) {
		//取消默认行为
		return false;
	}
	document.ondrop = function(evt) {
		source.style.position = "absolute";
		source.style.left = evt.pageX + "px";
		source.style.top = evt.pageY + "px";
		//取消事件默认行为
		return false;
	}
</script>

</body>
</html>



三、DataTransfer对象


未完,待续。。。

四、拖放行为

未完,待续。。。

无、改变拖放图标

未完、待续。。。

你可能感兴趣的:(html5,api,拖放)