HTML5拖放功能的注意点

最新推荐文章于 2024-07-10 16:57:46 发布

iteye_2864

最新推荐文章于 2024-07-10 16:57:46 发布

阅读量90

点赞数

分类专栏： HTML5 文章标签： html5 拖放 <!DOCTYPE HTML>

本文链接：https://blog.csdn.net/iteye_2864/article/details/82411804

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先看如下代码

<!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标签，所以显然不能识别这些拖放操作，代码就不能正常工作了。可参考[url]http://i.wanz.im/2010/05/28/why_doctype_html/[/url]

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

iteye_2864

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5拖放功能的注意点

首先看如下代码[code="java"] #div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev){ ev.preventDefault(); } function drag(ev){...
复制链接

扫一扫