HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性
之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了。今天为大家介绍HTML5拖拽中的其他一些小东东，闲话不多说赶快一起看看吧。
在默认情况下，链接、文本和图像是可以拖动的，不用再写代码即可拖动。如果想让其他元素标签也可以拖动，那么只有HTML5能实现了。HTML5为所有HTML元素规定了dragable属性，表示元素是否可以拖动。链接和图像的标签中自动将dragable属性自动被设置成true，其他元素的dragable属性的默认值是false。
支持dragable属性的浏览器有：Firefox 4+、Chrome、IE 10+和Safari 5+。Opera 11.5及之前的版本是不支持HTML5的拖放功能。另外能够让Firefox支持可拖动属性必须添加一个ondragstart事件处理程序，并在dataTransfer对象中保存一些信息才可以。在IE 9及更早版本中，通过mousedown事件处理程序调用dragDrop()方法能够让任何元素可以拖动。在Safari 4及更早的版本中，必须额外给相应的元素设置CSS样式 -khtml-user-drag: element才可以拖动。
HTML5拖拽其他成员
之前介绍过有关dataTransfer对象的一些属性，但是并不是很全。下面的一些方法和属性是其中有可能漏掉的属性和方法。
addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据(即增加作为拖动源而响应回调的对象)，不会影响拖动操作时页面元素的外观。直到写这篇博客的时候，只有Firefox 3.5+实现这种方法了。
clearData(format)：清除以特定格式保存的数据。实现这个方法的浏览器有Firefox 3.5+、Safari 4+、IE和Safari 4+。
setDragImge(element, x, y)：指定一幅图像，当拖动发生的时候，显示在光标下方。这个方法接收的参数有三个分别是：要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素可以是一幅图像，也可以是其他元素。是图像的话就显示图像，是其他元素的话就显示渲染后的元素。支持的浏览器有：Safari 4+、Chrome和Firefox 3.5+。
Types：当前保存的数据类型。这个是一个类似数组的集合，以”text”这样的字符串形式保存着数据类型。支持的浏览器有：Chrome、Firefox 3.5+和IE 10+。
了解过了一些理论知识，接下来一个小例子让大家更加加深理解。
dragable属性及其他成员小例子
HTML代码
01.[html] view plaincopyprint?02. 03.<ul> 04.<li draggable="true">a</li> 05.<li draggable="true">b</li> 06.<li draggable="false">c</li> 07.</ul> 08.<a href="http://www.baidu.com/">d</a> 09.<div id="div1"></div>
CSS代码
1.[css] view plaincopyprint?2. 3.li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;} 4.#div1{ width:100px; height:100px; background:red; margin:300px;}
JavaScript代码
01.[javascript] view plaincopyprint?02. 03.//dataTransfer对象（昆明国防路医院） : 连接拖拽细节的 ，在event对象下面的 04.//拖动不带链接的li，会起作用但不跳转链接 05.//拖动带连接的a，会起作用也跳转 06. 07.window.onload = function(){ 08.var aLi = document.getElementsByTagName('li'); 09.var aA = document.getElementsByTagName('a'); 10.var oDiv = document.getElementById('div1'); 11. 12.for(var i=0;i<aLi.length;i++){ 13. 14.aLi[i].ondragstart = function(ev){ //拖拽前触发 15. 16.this.style.background = 'yellow'; 17. 18.ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串 19. 20.ev.dataTransfer.effectAllowed = 'all'; 21. 22.ev.dataTransfer.setDragImage(this,0,0); 23. 24.}; 25. 26.aLi[i].ondragend = function(昆明国防路医院){ //拖拽结束触发 27. 28.this.style.background = ''; 29. 30.}; 31.} 32.for(var i=0;i<aA.length;i++){ 33. 34.aA[i].ondragstart = function(ev){ //拖拽前触发 35. 36.this.style.background = 'yellow'; 37. 38.ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串 39. 40.ev.dataTransfer.effectAllowed = 'link'; 41. 42. 43.}; 44. 45.aA[i].ondragend = function(){ //拖拽结束触发 46. 47.this.style.background = ''; 48. 49.}; 50.} 51. 52.oDiv.ondragenter = function(){ //相当于onmouseover 53. 54.this.style.background = 'green'; 55. 56.}; 57. 58.oDiv.ondragleave = function(){ //相当于onmouseout 59. 60.this.style.background = 'red'; 61. 62.}; 63. 64.oDiv.ondragover = function(ev){ //进入目标、离开目标之间，连续触发 65. 66.ev.preventDefault(); //阻止默认事件：元素就可以释放了 67. 68.ev.dataTransfer.dropEffect = 'link'; //真对外部文件 69. 70.}; 71. 72.oDiv.ondrop = function(ev){ //释放鼠标的时候触发 73. 74.this.style.background = 'red'; 75. 76.alert( ev.dataTransfer.getData('a') ); 77.alert( ev.dataTransfer.types ); 78. 79.}; 80. 81.};
桌面拖拽到页面中的小例子
HTML代码
01.[javascript] view plaincopyprint?02. 03.//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的 04. 05.window.onload = function(){ 06. 07.var oDiv = document.getElementById('div1'); 08. 09. 10. 11. 12.oDiv.ondragenter = function(){ //相当于onmouseover 13. 14.this.style.background = 'green'; 15. 16.}; 17. 18.oDiv.ondragleave = function(){ //相当于onmouseout 19. 20.this.style.background = 'red'; 21. 22.}; 23. 24.oDiv.ondragover = function(ev){ //进入目标、离开目标之间，连续触发 25. 26.ev.preventDefault(); //阻止默认事件：元素就可以释放了 27. 28.ev.dataTransfer.dropEffect = 'link'; //真对外部文件 29. 30.}; 31. 32.oDiv.ondrop = function(ev){ //释放鼠标的时候触发 33. 34.ev.preventDefault(); //阻止默认行为 35. 36.this.style.background = 'red'; 37. 38.var oFR = new FileReader(); 39. 40.var list = ev.dataTransfer.files; //当前拖拽的那个文件(返回的一个文件列表) 41. 42.//alert(list.length); 43. 44.//type : 文件类型 45. 46.//alert(list[0].type); 47. 48. 49.oFR.onload = function(){ //读取完成，触发事件 50. 51.alert(this.result); // 读取到的信息 52. 53.}; 54. 55.oFR.readAsDataURL(list[0]); 56. 57.}; 58. 59.};
CSS代码
1.[css] view plaincopyprint?2. 3.li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;} 4.#div1{ width:100px; height:100px; background:red; margin:300px;}
JavaScript代码
1.[html] view plaincopyprint?2. 3.<div id="div1">梦龙小站</div>
垃圾箱删除小例子
HTML代码
1.[html] view plaincopyprint?2. 3.<ul> 4.<li draggable="true">a</li> 5.<li draggable="true">b</li> 6.<li draggable="true">c</li> 7.</ul> 8.<div id="div1">垃圾箱</div>
CSS代码
1.[css] view plaincopyprint?2. 3.li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;} 4.#div1{ width:100px; height:100px; background:red; margin:300px; color:white;}
JavaScript代码
-
01.[javascript] view plaincopyprint?02.03.//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的04.05.window.onload =function(){06.varaLi = document.getElementsByTagName('li');07.varoDiv = document.getElementById('div1');08.variNow = 0;09.10.vartargetLi =null;11.12.for(vari=0;i<aLi.length;i++){13.14.aLi[i].ondragstart =function(ev){//拖拽前触发15.16.this.style.background ='yellow';17.18.ev.dataTransfer.setData('text',this.innerHTML);//存储一个键值对 : value值必须是字符串19.20.targetLi =this;21.22.};23.24.aLi[i].ondragend =function(){//拖拽结束触发25.26.this.style.background ='';27.28.};29.}30.31.oDiv.ondragenter =function(){//相当于onmouseover32.33.this.style.background ='green';34.35.};36.37.oDiv.ondragleave =function(){//相当于onmouseout38.39.this.style.background ='red';40.41.};42.43.oDiv.ondragover =function(ev){//进入目标、离开目标之间，连续触发44.45.ev.preventDefault();//阻止默认事件：元素就可以释放了46.47.48.};49.50.oDiv.ondrop =function(ev){//释放鼠标的时候触发51.52.this.style.background ='red';53.54.varoText = ev.dataTransfer.getData('text');55.56.if(targetLi){57.targetLi.parentNode.removeChild(targetLi);58.this.innerHTML ='删除的是:'+oText;59.}60.61.};62.63.};
