您的位置：首页 > 其它

IE和FireFox中层的拖动详解

2007-06-20 11:09 190 查看

好东西当然要共分享,源:http://blog.iyi.cn/hily/archives/2005/10/iefirefox.html

本篇主要讨论了IE和FireFox在层的拖动实现过程中的一些不同和一些常见问题，其他元件的拖动也是同样的道理，这里以使用较多的层元件为例进行解释。

层的拖动涉及了以下三个鼠标事件：
onmousedown：点下鼠标
onmousemove：移动鼠标
onmouseup：松开鼠标

拖动基本过程：
点下鼠标时，开始拖动，记下鼠标指针位置与被拖动元件的相对位置x；
鼠标移动时，根据鼠标指针的位置和相对元件位置x计算出元件的位置，并设置元件位置；
松开鼠标时，要销毁鼠标移动的事件处理程序，停止拖动。

下面来看一个层拖动的具体例子：

<html>

<head>

<!--

#drag{...}{

width:100px;

height:20px;

background-color:#eee;

border:1px solid #333;

position:absolute;

top:30px;

left:200px;

text-align:center;

cursor:default;

}

//-->

</style>

<!--

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>

</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>

<!--

#drag{...}{

width:100px;

height:20px;

background-color:#eee;

border:1px solid #333;

position:absolute;

top:30px;

left:200px;

text-align:center;

cursor:default;

}

//-->

</style>

<!--

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>

</body>

</html>

增加的一个传入参数r指定了元件的移动范围，它是一个数组，包含的四个元素分别代表元件的左、右、上、下范围。

接下来看一个在FireFox下会出现的问题，代码如下：

<html>

<head>

<!--

#drag{...}{

width:100px;

height:20px;

background-color:#eee;

border:1px solid #333;

position:absolute;

top:30px;

left:200px;

text-align:center;

cursor:default;

}

//-->

</style>

<!--

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>

</body>

</html>

要拖动的层中包含的是一张图片而不再是文字，这样在IE中仍可以正常拖动，而在FireFox中会发生异常，点下鼠标、拉动、并松开后，层并没有停止拖动，而是跟随着鼠标。
仔细地分析了一下原因，就是上面说过的Netscape的captureEvent()不能捕获某个特定元件的事件，当点下鼠标并拉动时时，FireFox会认为要拖动的对象是层里的图片，该操作无效。
要解决这个问题，只要把图片上的鼠标点下事件设置为无效，在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。
最终代码如下：

<html>

<head>

<!--

#drag{...}{

width:100px;

height:20px;

background-color:#eee;

border:1px solid #333;

position:absolute;

top:30px;

left:200px;

text-align:center;

cursor:default;

}

//-->

</style>

<!--

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>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航