HTML5拖放效能的注意点
日期：2014-05-17 浏览次数：20771 次
HTML5拖放功能的注意点
首先看如下代码
我在实现时犯了个错误：
缺少了<!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将拖放的元素放置在这里。
首先看如下代码
<!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将拖放的元素放置在这里。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
