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

浏览数：19 / 时间：2015年06月09日

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

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

　　HTML代码

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

　　JavaScript代码

window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
var disX = 0;
var disY = 0;
oDiv.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - oDiv.offsetLeft;
disY = ev.clientY - oDiv.offsetTop;
//在IE下，如果选中元素拖拽就会有问题 : IE设置全局捕获：setCapture 释放全局捕获：releaseCapture
if(oDiv.setCapture){
oDiv.setCapture();
}
document.onmousemove = function(ev){
var ev = ev || window.event;
oDiv.style.left = ev.clientX - disX + ‘px‘;
oDiv.style.top = ev.clientY - disY + ‘px‘;
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
};
//在标准浏览器下如果拖拽一个空的标签，就会有问题 : return false
//在标准浏览器下拖拽图片会有问题：return false
return false;
};
};

　　CSS代码

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