javascript 实现拖动

把如下代码另存为html页就可以测试效果了，里面注释写的很详细，不懂的地方给我留言。

<html>
  <head>
    <script language="javascript">
       var obj,dx,dy,down;
        function init(){
          //得到触发实践的对象（这里指<body></body>中的div
          obj = event.srcElement;
          //设置属于当前对象的鼠标捕捉
          obj.setCapture();
          //鼠标位置到obj的X轴上的距离
          dx = event.offsetX;
          //鼠标位置到obj的Y轴上的距离
          dy = event.offsetY;
          //鼠标按下
          down = true;
        }
        //当鼠标移动时
        function move(){
          //当鼠标按下且与 init() 中有相同的触发对象时
          if( down && event.srcElement == obj){
            //设置对象的位置，event.x 为鼠标相对于其父元素的x轴位置
            with(obj.style){
               posLeft=document.body.scrollLeft+event.x-dx;
               posTop=document.body.scrollTop+event.y-dy;
            }
          }
        }
        //当鼠标抬起时
        function stopDraw(){
          //鼠标抬起
          down = false;
          //释放当前对象的鼠标捕捉
          obj.releaseCapture();
        }
      </script>
  </head>
  <body>
    <div id="drawDiv" onmousedown="init()" onmousemove="move()" onmouseup="stopDraw()" style="position:absolute;width:200px;height:100px;top:100px;left:50px;background-color:olive;">拖我！！！</div>
  </body>
</html>

作者：Mr.Greedy　发表时间：2006-4-2　 [所属栏目：网页制作] | [返回首页]

友情博客

搜索

最新评论

RSS