IE和FireFox中层的拖动详解。
本篇主要讨论了IE和FireFox在层的拖动实现过程中的一些不同和一些常见问题，其他元件的拖动也是同样的道理，这里以使用较多的层元件为例进行解释。
层的拖动涉及了以下三个鼠标事件：
onmousedown：点下鼠标
onmousemove：移动鼠标
onmouseup：松开鼠标
拖动基本过程：
点下鼠标时，开始拖动，记下鼠标指针位置与被拖动元件的相对位置x；
鼠标移动时，根据鼠标指针的位置和相对元件位置x计算出元件的位置，并设置元件位置；
松开鼠标时，要销毁鼠标移动的事件处理程序，停止拖动。
代码注释：
1. 该实例使用drag()函数对某个元件添加事件处理程序以实现元件的拖动，传入的参数o为要被拖动的元件对象。
2. 必须将要拖动的元件的位置设置为绝对定位(absolute)，并设置左边距和顶边距。
3. layerX和layerY是Netscape的事件属性，表示事件相对于包容图层的X坐标和Y坐标，在IE中它们则是offsetX和offsetY。
4. setCapture()和captureEvents()分别是IE和Netscape进行设置事件捕获源的函数，在设置onmousemove和 onmouseup事件处理程序前必须使用，IE的setCapture可以针对某个特定的元件设置事件捕获，而Netscape中只能对整个文档设置，这将会导致一些问题。对应的停止捕捉事件函数为releaseCapture()和captureEvents()。
5. clientX、clientY以及pageX、pageY分别是IE和Netscape中事件发生位置相对于浏览器页面的X坐标和Y坐标。
有时要对拖动的范围做一个限定，比如窗口的滑动块，这时，只要稍稍修改onmousemove事件处理程序即可，在对元件定位前判断其位置。
修改后代码如下：
增加的一个传入参数r指定了元件的移动范围，它是一个数组，包含的四个元素分别代表元件的左、右、上、下范围。
接下来看一个在FireFox下会出现的问题，代码如下：
要拖动的层中包含的是一张图片而不再是文字，这样在IE中仍可以正常拖动，而在FireFox中会发生异常，点下鼠标、拉动、并松开后，层并没有停止拖动，而是跟随着鼠标。
仔细地分析了一下原因，就是上面说过的Netscape的captureEvent()不能捕获某个特定元件的事件，当点下鼠标并拉动时时，FireFox会认为要拖动的对象是层里的图片，该操作无效。
要解决这个问题，只要把图片上的鼠标点下事件设置为无效，在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。
最终代码如下：
层的拖动涉及了以下三个鼠标事件：
onmousedown：点下鼠标
onmousemove：移动鼠标
onmouseup：松开鼠标
拖动基本过程：
点下鼠标时，开始拖动，记下鼠标指针位置与被拖动元件的相对位置x；
鼠标移动时，根据鼠标指针的位置和相对元件位置x计算出元件的位置，并设置元件位置；
松开鼠标时，要销毁鼠标移动的事件处理程序，停止拖动。
<html>
<head>
<title> Drag Demo 1 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'));
};
function drag(o){
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx;
o.style.top=ty;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head>
<body>
<div id="drag">drag me<div>
</body>
</html>
代码注释：
1. 该实例使用drag()函数对某个元件添加事件处理程序以实现元件的拖动，传入的参数o为要被拖动的元件对象。
2. 必须将要拖动的元件的位置设置为绝对定位(absolute)，并设置左边距和顶边距。
3. layerX和layerY是Netscape的事件属性，表示事件相对于包容图层的X坐标和Y坐标，在IE中它们则是offsetX和offsetY。
4. setCapture()和captureEvents()分别是IE和Netscape进行设置事件捕获源的函数，在设置onmousemove和 onmouseup事件处理程序前必须使用，IE的setCapture可以针对某个特定的元件设置事件捕获，而Netscape中只能对整个文档设置，这将会导致一些问题。对应的停止捕捉事件函数为releaseCapture()和captureEvents()。
5. clientX、clientY以及pageX、pageY分别是IE和Netscape中事件发生位置相对于浏览器页面的X坐标和Y坐标。
有时要对拖动的范围做一个限定，比如窗口的滑动块，这时，只要稍稍修改onmousemove事件处理程序即可，在对元件定位前判断其位置。
修改后代码如下：
<html>
<head>
<title> Drag Demo 2 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'),[200,400,30,30]);
};
function drag(o,r){
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head>
<body>
<div id="drag">drag me<div>
</body>
</html>
增加的一个传入参数r指定了元件的移动范围，它是一个数组，包含的四个元素分别代表元件的左、右、上、下范围。
接下来看一个在FireFox下会出现的问题，代码如下：
<html>
<head>
<title> Drag Demo 3 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'),[200,400,30,30]);
};
function drag(o,r){
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head>
<body>
<div id="drag"><img src="http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" /><div>
</body>
</html>
要拖动的层中包含的是一张图片而不再是文字，这样在IE中仍可以正常拖动，而在FireFox中会发生异常，点下鼠标、拉动、并松开后，层并没有停止拖动，而是跟随着鼠标。
仔细地分析了一下原因，就是上面说过的Netscape的captureEvent()不能捕获某个特定元件的事件，当点下鼠标并拉动时时，FireFox会认为要拖动的对象是层里的图片，该操作无效。
要解决这个问题，只要把图片上的鼠标点下事件设置为无效，在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。
最终代码如下：
<html>
<head>
<title> Drag Demo 3 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'),[200,400,30,30]);
};
function drag(o,r){
o.firstChild.onmousedown=function(){return false;};
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head>
<body>
<div id="drag"><img src="http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" /><div>
</body>
</html>