思享工具箱

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

摘要：
今天，我将介绍HTML5拖动中的一些其他小东西。让我们一起看一看，不要说太多闲话。HTML5为所有HTML元素指定了可拖动属性，指示是否可以拖动元素。在链接和图像的标签中，可拖动属性自动设置为true，其他元素的可拖动属性的默认值为false。支持可拖动属性的浏览器包括Firefox 4+、Chrome、IE10+和Safari 5+。此外，为了使Firefox支持可拖动属性，您必须添加一个ondragstart事件处理程序，并在dataTransfer对象中保存一些信息。HTML5拖放的其他成员之前已经引入了dataTransfer对象的一些属性，但它们不是很完整。
　　可拖动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代码 

  1. <ul>  
  2.     <li draggable="true">a</li>  
  3.     <li draggable="true">b</li>  
  4.     <li draggable="false">c</li>  
  5. </ul>  
  6. <a href="http://www.baidu.com/">d</a>  
  7. <div id="div1"></div>  

　　CSS代码 

  1. li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}  
  2. #div1{ width:100px; height:100px; background:red; margin:300px;}  

　　JavaScript代码 

  1. //dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的  
  2. //拖动不带链接的li，会起作用但不跳转链接  
  3. //拖动带连接的a，会起作用也跳转  
  4.   
  5. window.onload = function(){  
  6.     var aLi = document.getElementsByTagName('li');  
  7.     var aA = document.getElementsByTagName('a');  
  8.     var oDiv = document.getElementById('div1');  
  9.       
  10.     for(var i=0;i<aLi.length;i++){  
  11.       
  12.         aLi[i].ondragstart = function(ev){ //拖拽前触发  
  13.           
  14.             this.style.background = 'yellow';  
  15.               
  16.             ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串  
  17.               
  18.             ev.dataTransfer.effectAllowed = 'all';  
  19.               
  20.             ev.dataTransfer.setDragImage(this,0,0);  
  21.           
  22.         };  
  23.           
  24.         aLi[i].ondragend = function(){  //拖拽结束触发  
  25.           
  26.             this.style.background = '';  
  27.           
  28.         };  
  29.     }  
  30.     for(var i=0;i<aA.length;i++){  
  31.       
  32.         aA[i].ondragstart = function(ev){ //拖拽前触发  
  33.           
  34.             this.style.background = 'yellow';  
  35.               
  36.             ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串  
  37.               
  38.             ev.dataTransfer.effectAllowed = 'link';  
  39.               
  40.           
  41.         };  
  42.           
  43.         aA[i].ondragend = function(){  //拖拽结束触发  
  44.           
  45.             this.style.background = '';  
  46.           
  47.         };  
  48.     }  
  49.       
  50.     oDiv.ondragenter = function(){  //相当于onmouseover  
  51.           
  52.         this.style.background = 'green';  
  53.           
  54.     };  
  55.       
  56.     oDiv.ondragleave = function(){  //相当于onmouseout  
  57.           
  58.         this.style.background = 'red';  
  59.           
  60.     };  
  61.       
  62.     oDiv.ondragover = function(ev){ //进入目标、离开目标之间，连续触发  
  63.           
  64.         ev.preventDefault();  //阻止默认事件：元素就可以释放了  
  65.           
  66.         ev.dataTransfer.dropEffect = 'link';  //真对外部文件  
  67.           
  68.     };  
  69.       
  70.     oDiv.ondrop = function(ev){  //释放鼠标的时候触发  
  71.       
  72.         this.style.background = 'red';    
  73.       
  74.         alert( ev.dataTransfer.getData('a') );  
  75.         alert( ev.dataTransfer.types );  
  76.       
  77.     };  
  78.       
  79. };  
　　桌面拖拽到页面中的小例子

　　HTML代码 

  1. //dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的  
  2.   
  3. window.onload = function(){  
  4.   
  5.     var oDiv = document.getElementById('div1');  
  6.       
  7.       
  8.       
  9.       
  10.     oDiv.ondragenter = function(){  //相当于onmouseover  
  11.           
  12.         this.style.background = 'green';  
  13.           
  14.     };  
  15.       
  16.     oDiv.ondragleave = function(){  //相当于onmouseout  
  17.           
  18.         this.style.background = 'red';  
  19.           
  20.     };  
  21.       
  22.     oDiv.ondragover = function(ev){ //进入目标、离开目标之间，连续触发  
  23.           
  24.         ev.preventDefault();  //阻止默认事件：元素就可以释放了  
  25.           
  26.         ev.dataTransfer.dropEffect = 'link';  //真对外部文件  
  27.           
  28.     };  
  29.       
  30.     oDiv.ondrop = function(ev){  //释放鼠标的时候触发  
  31.       
  32.         ev.preventDefault();  //阻止默认行为  
  33.       
  34.         this.style.background = 'red';    
  35.           
  36.         var oFR = new FileReader();  
  37.       
  38.         var list = ev.dataTransfer.files;  //当前拖拽的那个文件(返回的一个文件列表)  
  39.           
  40.         //alert(list.length);  
  41.           
  42.         //type : 文件类型  
  43.           
  44.         //alert(list[0].type);  
  45.           
  46.           
  47.         oFR.onload = function(){ //读取完成，触发事件  
  48.               
  49.             alert(this.result);  // 读取到的信息  
  50.               
  51.         };  
  52.           
  53.         oFR.readAsDataURL(list[0]);  
  54.       
  55.     };  
  56.       
  57. };  

　　CSS代码 

  1. li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}  
  2. #div1{ width:100px; height:100px; background:red; margin:300px;}  

　　JavaScript代码 

  1. <div id="div1">梦龙小站</div>  

　　垃圾箱删除小例子

　　HTML代码 

  1. <ul>  
  2.     <li draggable="true">a</li>  
  3.     <li draggable="true">b</li>  
  4.     <li draggable="true">c</li>  
  5. </ul>  
  6. <div id="div1">垃圾箱</div>  



　　CSS代码 

  1. li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}  
  2. #div1{ width:100px; height:100px; background:red; margin:300px; color:white;}  



　　JavaScript代码 

  1. //dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的  
  2.   
  3. window.onload = function(){  
  4.     var aLi = document.getElementsByTagName('li');  
  5.     var oDiv = document.getElementById('div1');  
  6.     var iNow = 0;  
  7.       
  8.     var targetLi = null;  
  9.       
  10.     for(var i=0;i<aLi.length;i++){  
  11.       
  12.         aLi[i].ondragstart = function(ev){ //拖拽前触发  
  13.           
  14.             this.style.background = 'yellow';  
  15.               
  16.             ev.dataTransfer.setData('text',this.innerHTML);  //存储一个键值对 : value值必须是字符串  
  17.               
  18.             targetLi = this;  
  19.           
  20.         };  
  21.           
  22.         aLi[i].ondragend = function(){  //拖拽结束触发  
  23.           
  24.             this.style.background = '';  
  25.           
  26.         };  
  27.     }  
  28.       
  29.     oDiv.ondragenter = function(){  //相当于onmouseover  
  30.           
  31.         this.style.background = 'green';  
  32.           
  33.     };  
  34.       
  35.     oDiv.ondragleave = function(){  //相当于onmouseout  
  36.           
  37.         this.style.background = 'red';  
  38.           
  39.     };  
  40.       
  41.     oDiv.ondragover = function(ev){ //进入目标、离开目标之间，连续触发  
  42.           
  43.         ev.preventDefault();  //阻止默认事件：元素就可以释放了  
  44.           
  45.           
  46.     };  
  47.       
  48.     oDiv.ondrop = function(ev){  //释放鼠标的时候触发  
  49.       
  50.         this.style.background = 'red';    
  51.       
  52.         var oText = ev.dataTransfer.getData('text');  
  53.       
  54.         if(targetLi){  
  55.             targetLi.parentNode.removeChild(targetLi);  
  56.             this.innerHTML = '删除的是:'+oText;  
  57.         }  
  58.       
  59.     };  
  60.       
  61. };  

　　HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)就为大家介绍到这里了，更多有关HTML5的相关小东东，敬请关注梦龙小站的相关更新。感谢大家的支持。

标签：#html5 | 浏览：164 | 发布日期：

免责声明：文章转载自《HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇linux初级学习笔记七：linux用户管理，密码和组命令详解！(视频序号：04_1)Fedora的一些个人配置下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

HTML5 Canvas 获取网页的像素值。

我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值。 自从HTML5 画布出来之后。就有更好的方法来获取了，比方郭阿里巴巴ICON矢量库 用的SVG和渐变来进行绘制: 我昨天用Canvas来绘制了一下。由于Canvas有现成的方法getImageDat...

HTML5 文件操作API

简介 我常常想，如果网络应用能够读取和写入文件与目录，将会非常方便。从离线转移到在线后，应用变得更加复杂，而文件系统方面的API的缺乏也一直阻碍着网络前进。存储二进制数据或与其进行交互不应局限于桌面。令人欣慰的是，由于FileSystemAPI的出现，这一现状终于得到了改变。有了FileSystemAPI，网络应用就可以创建、读取、导航用户本地文件系统中的...

分享10个必备的简化Web设计的HTML5工具

这个文章是适合真正想去做HTML5应用的设计人员和开发人员阅读。这里我将不再重复HTML5开发的重要性。因为大家都已经知道这点。这里我收集了10个HTML5的工具帮助你在不同的方面简化你的开发和设计。如果你也喜欢这个文章，请在我们的网站GBin1留言支持！ 1. FindmebyIP 一个列出了所有浏览器对于HTML5支持细节的网站。特别适合对于浏览器的兼...

39个让你受益的HTML5教程

闲话少说，本文作者为大家收集了网上学习HTML5的资源，期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个，由于第5个和第8个是反复的。 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题。假设...

HTML5离线缓存问题

HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存（Application Cache）？ HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势： 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过...

[备忘]Adobe发布Flash到HTML5的转换工具 Wallaby

Adobe 今天发布了一个名为 Wallaby 的工具，可用来将 Flash 转成 HTML5 。 目前该工具还是体验阶段，可从这里下载到。一旦经过转换，你可以处理任何 HTML 一样来处理这个文件。 目前阶段，一些 Flash 专业的特性还不被支持。 转自：http://www.oschina.net/news/16133/adobe-release...

最新文章

随机推荐

思享工具箱导航