嗨喽大家！让我们开始深入探讨下HTML5里超棒的拖拽功能~上次我们已经初步了解过，接下来就让我们看看它还有哪些神奇之处吧
拖拽功能的默认情况
你听过吗？用HTML5做的网页，连链接、文字和图片都能随便拖动，就像在玩小游戏一样！这样看网页超有意思，使用起来也特方便！如果要让别的东西也能被拖动，得给它加个`draggable=true`属性哈。
设置元素为可拖动
HTML5中的`draggable`功能挺牛逼的，它知道哪个元件能动。想让那个定死不动的`div`动起来？就在它的上面添个字就行了！这个功能对网页设计来说太有用了，想让哪个元素能拖就能拖，用好了，用户体验也会提升！
浏览器的支持情况
虽然不是所有浏览器都能完美支持HTML5的拖拽功能，但像火狐4+、谷歌、微软IE10+和苹果Safari5+等主流浏览器基本上都没问题。但要注意的是，老版本的Opera（低于11.5）不行，所以大家在编写代码时最好考虑到这个因素，保证自己的代码在各种浏览器中运行流畅，这样才能让你的拖拽功能在不同设备上都好用。
特定浏览器的拖拽实现
说起拖拽这事儿，有些浏览器特别,啰嗦，比如火狐得先加个’ondragstart’事件代码，然后把要拖的东西放进去；还有IE9之前的版本，咱们就只能在鼠标按下去的那一下用到’tragDrop()’这个方法。虽然有点儿费劲，但这不正说明了HTML5拖拽功能挺给力吗？
添加拖动元素的方法
你知道吗？HTML5有个超赞的小玩意儿叫‘addElement(element)’，可以让咱们随心所欲地加内容！它主要就是改变拖拽数据的样子，也就是在那个拖拽源的回调对象里加点料，但其实并没真正改变元素本身。不过可惜的是，现在只有火狐浏览器3.5+和苹果浏览器Safari4+才能用上这个神奇的功能。
自定义拖动图标
别着急这里有个特别棒的工具叫`setDragImage(element,x,y)`。它能在拖动时在鼠标下面显示一张图片或HTML元素，让你的操作更有趣。而且，这个功能在Safari4+、Chrome和Firefox3.5+上都能用，让你的拖拽体验更炫酷！
- a
- b
- c
数据类型的管理
//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的
//拖动不带链接的li，会起作用但不跳转链接
//拖动带连接的a，会起作用也跳转
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var aA = document.getElementsByTagName('a');
var op = document.getElementById('p1');
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){ //拖拽前触发
this.style.background = 'yellow';
ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
ev.dataTransfer.effectAllowed = 'all';
ev.dataTransfer.setDragImage(this,0,0);
};
aLi[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
for(var i=0;i<aA.length;i++){
aA[i].ondragstart = function(ev){ //拖拽前触发
this.style.background = 'yellow';
ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
ev.dataTransfer.effectAllowed = 'link';
};
aA[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
op.ondragenter = function(){ //相当于onmouseover
this.style.background = 'green';
};
op.ondragleave = function(){ //相当于onmouseout
this.style.background = 'red';
};
op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
ev.preventDefault(); //阻止默认事件：元素就可以释放了
ev.dataTransfer.dropEffect = 'link'; //真对外部文件
};
op.ondrop = function(ev){ //释放鼠标的时候触发
this.style.background = 'red';
alert( ev.dataTransfer.getData('a') );
alert( ev.dataTransfer.types );
};
};
听过么？’Types’就像是个大口袋，什么类型的数据都能塞进去，像咱们平时看到的那种纯文本形式的”text”，也包括。用这个东西，无论是Chrome、Firefox3.5+还是IE10+浏览器，想怎么拖拽就怎么拖拽，轻轻松松就能搞定数据管理和控制！
实际应用案例
//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的
window.onload = function(){
var op = document.getElementById('p1');
op.ondragenter = function(){ //相当于onmouseover
this.style.background = 'green';
};
op.ondragleave = function(){ //相当于onmouseout
this.style.background = 'red';
};
op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
ev.preventDefault(); //阻止默认事件：元素就可以释放了
ev.dataTransfer.dropEffect = 'link'; //真对外部文件
};
op.ondrop = function(ev){ //释放鼠标的时候触发
ev.preventDefault(); //阻止默认行为
this.style.background = 'red';
var oFR = new FileReader();
var list = ev.dataTransfer.files; //当前拖拽的那个文件(返回的一个文件列表)
//alert(list.length);
//type : 文件类型
//alert(list[0].type);
oFR.onload = function(){ //读取完成，触发事件
alert(this.result); // 读取到的信息
};
oFR.readAsDataURL(list[0]);
};
};
别小看这个拖拽功能，它可不是单纯的炫技，用着真的很顺手，比如说你可以随手将电脑桌面上的文件拖到浏览器里，省去了上传的繁琐步骤。人们都觉得这种简单又好用的操作特别酷，这也是HTML5拖拽功能受欢迎的原因之一。
li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}
听说你们觉得HTML5的拖拽功能好厉害是不是？这玩意儿就像个贴心小助手，让网页更有趣味性和易懂，用户体验也会提升不少。学会后好好利用，肯定能给用户带来不一样的上网体验！看完这篇文章，希望你们有所收获。有啥问题或者想聊什么话题，就在评论区告诉我哈；别忘了点赞分享，让更多人知道HTML5拖拽的神奇之处！
梦龙小站
评论0