控件实现任意拖动效果

qian6688099 2008-08-26 02:19:10

各位帮忙，希望能给小弟讲解的详细点，有代码最好，先谢了....

...全文

121 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

西安风影 2008-08-26

打赏
举报

<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 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。