HTML5拖放功能的注意点

hanazawakana

浏览: 89172 次

最近访客更多访客>>

zhangkongfei

coolworld

ClutchBear

im9999

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

html5 拖放 <!DOCTYPE HTML>

首先看如下代码

<!DOCTYPE HTML>
<html>
	<head>
		<style type="text/css">
			#div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
		</style>
		<script type = "text/javascript">
			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>请把 W3School 的图片拖放到矩形中：</p>
		<div id = "div1" ondragover = "allowDrop(event)" ondrop = "drop(event)"></div> <br/> <br/><br/><br/><br/>
		<img id = "img1"src = "resource/9.jpg" ondragstart = "drag(event)" draggable = "true" /><br/>
	</body>
</html>

我在实现时犯了个错误：
缺少了<!DOCTYPE HTML>，那么这个<!DOCTYPE HTML>和类似的 <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">有什么作用呢。
该标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。如果页面中没有他，就会用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。
而<!DOCTYPE HTML>是HTML5的解析标准，html5的doctype就是这样写的，并且现代浏览器都认识它。如果我们不使用它就使用了浏览器去解析这些HTML5标签，所以显然不能识别这些拖放操作，代码就不能正常工作了。可参考http://i.wanz.im/2010/05/28/why_doctype_html/

总结，如何实现拖放呢？一共有四个部分需要实现，第一对于图片设定其可拖放，第二，对于该图片，定义当元素被拖放后发生什么，往往是把该元素的id通过DHTML的dataTransfer属性的setData方法和一个类型进行绑定。等放置的时候就通过这个类型找到这个元素，随后把他当做子元素加入到拖放地中。第三，通过ondragover定义拖放到哪里，也就是标签中含有ondragover属性代表图片等可以被拖放到这里。第四，定义拖放最后的放置的函数。上面也说了，通过getData方法找到拖放的元素ID，然后调用XML DOM的添加节点的方法appendChild将拖放的元素放置在这里。

分享到：