`
leeleo
  • 浏览: 319794 次
  • 性别: Icon_minigender_1
  • 来自: 贵阳
社区版块
存档分类
最新评论

DIV图层拖动原理与实现

IEWeb 
阅读更多

这几天做基于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 onmousemove="dragit('aryee')" onmouseup="v=0"> 
<div style="background:#CCC;width:100px;height:100px;position:absolute;" id="aryee" onmousedown="getV('aryee')"> </div> 
</body>

 

分享到：
| javascript 多个层拖动效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics