如何制作类似msn（QQ）等网页中的拖动效果（一）http://blog.csdn.net/BlueDestiny/archive/2006/05/25/755189.aspx
因为篇幅原因，所以得分开来写，这些层次也清晰一些
接着上面的讲。
我们按照上面的思路来一步步的写代码
一、关于坐标event.clientX和event.clientY，而为什么不用event.x和event.y，以后我会写清楚，其实已经写好了的。看情况我就会贴出来。转入正题吧，看看参考
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
二、得到拖动物件的坐标。即得到绝对坐标，用以下代码。参数e为拖动物件对象，使用函数时传入。返回的是对象的X坐标、Y坐标、宽度、长度的数组关联。而为什么还要用迭代求offsetLeft和offsetTop呢？因为他们是相对于父坐标而言的，所以必须通过循环来得到绝对定位。
function Offset(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(e=e.offsetParent) {
t+=e.offsetTop;
l+=e.offsetLeft;
}
return { t:t, l:l, w:w, h:h }
};
三、用事件触发程序句柄。
obj.onmouseover=function() {
//to do; never-online Demo
};
obj.onmousedown=function() {
//to do; never-online Demo
}
obj.onmousemove=function() {
//to do; never-online Demo
}
obj.onmouseup=function() {
//to do; never-online Demo
}
四、拖动时得到坐标。
obj.onmousedown=function() {
//当按下时记住原始坐标。never-online Demo
obj.X = event.clientX - Offset(obj).l;
obj.Y = event.clientY - Offset(obj).t;
}
obj.onmousemove=function() {
新坐标减去旧坐标得到当前位置 never-online Demo
obj.style.left = event.clientX - obj.X;
obj.style.top = event.clientY - obj.Y;
}
五、看看完整的简单拖动层代码吧。
第三节将讲述如何一步步的完善拖动层代码。
发表于 @ 2006年05月25日 19:00:00|评论(loading...)|编辑