这几天做基于Web页面的套打程序,用到了图层的拖动,在网上找了些资料,来说明原理及实现代码,总结如下:
原理图: 
说明下:
O(0,0),表示窗口内容区左上角坐标;
T(x1,y1),表示拖动前,层的左上角顶点坐标;
M(xm,ym),M=Mouse,此点表示,正准备拖动瞬间,鼠标与DIV接触点的坐标;
M'(x'm,y'm),表示拖动后放手前,鼠标与DIV接触点的坐标;
T'(x?,y?),拖动后层所在的位置的左上角顶点坐标;
拖动原理:
1,鼠标按下,启动拖动
2,鼠标放手,停止拖动
3,鼠标移动,DIV的左上角顶点坐标发生变化,这种变化与鼠标的坐标有密切关系
4,拖动过程中,鼠标相对层是静止的
原理解析及实现:
对于原理1,原理2,有点像开关,我们可用一变量来实现"启动拖动","停止拖动"控制,js如下:
var v=0;
function getV(s){
v=s;
}
对于原理3,还得回头看上面图片,再结合原理4:
由于鼠标相对层是静止的,可以得出(高中物理告诉我们的):
xm-x1=x'm-x?
ym-y1=y'm-y?
变化一下:
x?=x'm-(xm-x1)
y?=y'm-(ym-y1)
为什么要求x?,y?呢?,这就是为了响应原理3,得出变化关系
接下来就是如何求的问题:
对于鼠标的X坐标,我们可以用event.clientX表示,同理,
对于鼠标的Y坐标,我们可以用event.clientY表示
(备注:仅IE)
层的左边与窗口的左边距离,用 "层.style.pixelLeft"表示;
层的顶边与窗口的顶边距离,用 "层.style.pixelTop"表示;--好像有点问题??
但是,下面的关系如何求得?
xm-x1
ym-y1
在正准备拖动瞬间,鼠标不是与拖动层有接触吗?考虑这一瞬间,就得对getV(s)进行改写啦,
function getV(s){
v=s;
var x=event.clientX-层.style.pixelLeft;
var y=event.clientY-层.style.pixelTop;
}
所以,
x?=x'm-(xm-x1)
y?=y'm-(ym-y1)
就变成:
x?=x'm-x
y?=y'm-x
即:
层.style.pixelLeft=event.clientX-x;
层.style.pixelTop=event.clientY-y;
下面是原码:
<script>
function $(ID){
return document.getElementById(ID);
}
var v=0;
var x,y;
function getV(s){
v=s;
x=event.clientX-$("aryee").style.pixelLeft;
y=event.clientY-$("aryee").style.pixelTop;
}
function dragit(ID){
if(v==0){
return false;
}else{
$(ID).style.pixelLeft=event.clientX-x;
$(ID).style.pixelTop=event.clientY-y;
}
}
</script>
<body οnmοusemοve="dragit('aryee')" οnmοuseup="v=0">
<div style="background:#CCC;width:100px;height:100px;position:absolute;" id="aryee" οnmοusedοwn="getV('aryee')"> </div>
</body>
5963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
