页面如何拖动效果啊，原理和代码

wyj518 2009-02-01 02:20:06

同上

...全文

72 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

西安风影 2009-02-02

打赏
举报

<script type="text/javascript">

var offsetX;

var offsetY;

var zIndex;

var dragging=false;

var obj;

function init()

{

  obj=event.srcElement;

  obj.setCapture();

  zIndex=obj.style.zIndex;

  obj.style.zIndex=100;

  offsetX=event.offsetX;

  offsetY=event.offsetY;

  dragging=true;

} 

function moveit()

{

  if(dragging && event.srcElement==obj)

  {

    obj.style.left=document.body.scrollLeft+event.clientX-offsetX;

    obj.style.top=document.body.scrollTop+event.clientY-offsetY;

  }

}

function stopdrag()

{

  dragging=false;

  obj.style.zIndex=zIndex;

  obj.releaseCapture();

}

</script>

<body>

<div onmousedown="init()" onmousemove="moveit()" onmouseup="stopdrag()" style="position:absolute;left:10;top:50;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div>

<div onmousedown="init()" onmousemove="moveit()" onmouseup="stopdrag()" style="position:absolute;left:120;top:50;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div>

<div onmousedown="init()" onmousemove="moveit()" onmouseup="stopdrag()" style="position:absolute;left:230;top:50;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>

</body>

注意:只有div的position属性为absolute时,div对象才能进行拖动操作。

1.setCapture() 设置属于当前文档的对象的鼠标捕捉。

2.event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

3.event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

4.releaseCapture() 释放当前文档中对象的鼠标捕捉。

5.scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

6.scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

lihan6415151528 2009-02-01

打赏
举报

http://blog.csdn.net/lihan6415151528/archive/2008/10/29/3175958.aspx

tantaiyizu 2009-02-01

打赏
举报

http://www.scriptlover.com/agent/?url=/controls/EasyWindow/EasyWindow.html

guansong8079776 2009-02-01

打赏
举报

attachEvent方法，为某一事件附加当前对象的处理事件，
detachEvent方法是移除当前对象的处理事件
IE中使用这两个方法，不支持Mozilla系列；
如果是Mozilla系列要使用 addEventListener方法和removeEventListener

guansong8079776 2009-02-01

打赏
举报

<HTML>
<HEAD>
<TITLE> 拖动层 </TITLE>

<script language="javascript">
function start(){//开始移动
document.attachEvent("onmousemove",movediv);
}
function end()//结束移动
{
document.detachEvent("onmousemove",movediv);
}
function movediv()//移动方法
{
var obj = document.getElementById("testDIV");
obj.style.left = event.clientX-obj.offsetWidth/2;
obj.style.top = event.clientY-obj.offsetHeight/2;
}
</script>
</HEAD>

<BODY>
<div id = "testDIV" onmousedown = "start();" onmouseup="end();" style="border:1px inset #000000;background:red;width:100px;height:100px;position:absolute;top:20px;left:200px">
</div>
</BODY>
</HTML>