如今，HTML5可谓如众星捧月一般，受到许多业内巨头的青睐。而且微软的IE10也加入了对HTML5的大量支持，包含2D和3D高效平滑转换，完全支持WebKit语法，还有Web Workers、Web Sockets、Web Fonts、Indexed DB、SVG滤镜、Flexbox布局等等。这里，给大家讲讲HTML5在IE10实现拖放功能，因为这个功能在桌面客户端软件中应用十分普遍。
首先，了解一下HTML5的基本组成元素：
-
<header>：用于任何网站的头部。
-
<nav>：常用的导航菜单
-
<section>：定义文档中的节或区段。
-
<article>：定义独立内容。
-
<footer>：定义section或document的页脚。
HTML5标准对拖放做了规定，IE10支持dataTransfer对象和拖放图片、超链接、文本的事件，现在增加了draggable属性，支持把一个或多个文件从桌面拖放到网页上的功能。基本状态如下：
draggable = 'true'；该元素可拖放。
draggable = 'false'；该元素不可拖放。
draggable = 'auto'；该元素遵循默认的浏览器行为（文本、超链接和图片可拖放，其他元素不能）。
实现图片的拖放效果
-
<!DOCTYPE html>
-
<head>
-
<meta charset="gb2312">
-
<title>拖放</title>
-
<script type="text/javascript">
-
function init(){
-
var source = document.getElementById("dragMe");
-
var dest = document.getElementById("text");
-
source.addEventListener("dragstart", function(ev) {
-
var dt = ev.dataTransfer;
-
dt.effectAllowed = 'all';
-
dt.setData("text/plain", "Hello");
-
},false);
-
-
dest.addEventListener("dragend", function(ev) {
-
ev.preventDefault();},false);
-
dest.addEventListener("drop", function(ev) {
-
var dt = ev.dataTransfer;
-
var text = dt.getData("text/plain");
-
dest.textContent += text;
-
ev.preventDefault();
-
ev.stopPropagation();
-
},false);
-
}
-
document.ondragover = function(e){
-
e.preventDefault();
-
};
-
false;
-
-
document.ondrop = function(e) {
-
e.preventDefault();
-
};
-
false;
-
</script>
-
</head>
-
<body onload="init()">
-
<h1>拖放示例1</h1>
-
<!-- draggable属性设为true -->
-
<div id="dragMe" draggable="true" style="width: 200px; border: 1px solid gray;"> 拖放试试</div>
-
<div id="text" style="width: 200px; height: 200px; border: 1px solid gray;"></div>
-
</body>
当用户拖动一个可拖放的元素时，IE10随着拖动的光标移动显示一个元素的虚影。draggable属性是不可继承的，因此元素的子元素不会自动变成可拖放的。
另外，dataTransfer对象的files属性支持用户把文件从桌面的文件夹中拖放到网页上。如邮件客户端，把附件拖放进邮件内容中，或者在图库页面中添加照片。这种从桌面端到Web端的无缝交互无疑是Web开发的一大亮点。
HTML5现有标准能够被各大浏览器无差别支持，就能看出大家对HTML5的喜爱程度，估计在3年内会达到相对普及的程度，如何在未来的市场上体现强大的竞争力，还需拭目以待。
