爱程序网

HTML5实战与剖析之原生拖拽(一拖拽历史概述)

来源: 阅读:

  提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了。可以用鼠标任意拖拽着一个物体到任何你想去的地方。

  最早拥有JavaScript拖拽功能的是IE4浏览器。当时,网页中只有两种对象是可以拖拽的,那就是:图形和某些文字。拖拽图像的时候,把鼠标放在图像上,按住鼠标不放就可以拖拽了。拖拽文字时,要先选中文字,然后可以像拖动图像那样拖拽选中的文字。在IE4中,唯一有效的放置拖拽文字的目标是文本框。到了IE5.5更进一步,让网页中的任何元素都可以拖拽(IE6以上也支持这些功能了)。随着浏览器一点点更新换代,随着IE7IE8以及其他浏览器的诞生,网页中所有东西都可以拖拽了,只不过是通过JavaScript程序来实现的。下面就是没有HTML5的时候,拖拽的实现小例子。

 

  HTML代码 

  1. <div id="div1" style="width:100px; height:100px; background:red; position:absolute;">梦龙小站</div>  

  JavaScript代码

 

  1. window.onload = function(){  
  2.     var oDiv = document.getElementById('div1');  
  3.     var disX = 0;  
  4.     var disY = 0;  
  5.       
  6.     oDiv.onmousedown = function(ev){  
  7.         var ev = ev || window.event;  
  8.         disX = ev.clientX - oDiv.offsetLeft;  
  9.         disY = ev.clientY - oDiv.offsetTop;  
  10.           
  11.         //在IE下,如果选中元素拖拽就会有问题 : IE设置全局捕获:setCapture 释放全局捕获:releaseCapture  
  12.         if(oDiv.setCapture){  
  13.             oDiv.setCapture();  
  14.         }  
  15.           
  16.         document.onmousemove = function(ev){  
  17.             var ev = ev || window.event;  
  18.             oDiv.style.left = ev.clientX - disX + 'px';  
  19.             oDiv.style.top = ev.clientY - disY + 'px';  
  20.         };  
  21.           
  22.         document.onmouseup = function(){  
  23.             document.onmousemove = null;  
  24.             document.onmouseup = null;  
  25.             if(oDiv.releaseCapture){  
  26.                 oDiv.releaseCapture();  
  27.             }  
  28.         };  
  29.   
  30.         //在标准浏览器下如果拖拽一个空的标签,就会有问题 : return false  
  31.         //在标准浏览器下拖拽图片会有问题:return false  
  32.         return false;  
  33.     };  
  34.       
  35. };  

 

  CSS代码 

  1. li{ width:100pxheight:30pxborder:1px #000000 solidmargin:20pxlist-style:none;}  
  2. #div1width:100pxheight:100pxbackground:redmargin:300px;}  

  直到HTML5的出现。HTML5是以IE为基础制定了拖拽规范。支持原生拖拽的浏览器有:Chrome、Safari 3+和Firefox 3.5+。

  HTML5中的拖拽,可以在窗口间、框架间,甚至在应用间进行完美拖拽。浏览器对拖拽的支持为实现这一功能实现了便利。

  HTML5实战与剖析之原生拖拽(一)——拖拽历史概述,就为大家介绍到这里了。有了HTML5拖拽,就可以实现很多非常绚丽的效果了。更过有关HTML5的更新敬请关注梦龙小站。

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助