cu_Cbear 发表于 2011-06-23 17:00

JS通用窗口拖动函数

JS通用窗口拖动函数
view sourceprint?<PRE class=brush:javascript;gutter:false;>调用请使用: onmousedown='Move_obj("objId")'objId: 表示你想拖动的窗口ID </PRE>

view sourceprint?<script language="JavaScript" type="text/javascript">

    ////

    // 点击拖动窗口- 调用请使用: onmousedown='Move_obj("objId")'objId: 表示你想拖动的窗口ID

    ////

    var drag_=false;

    //获取输入:ID, 获得objId对象

    var D=new Function('obj','return document.getElementById(obj);');

    var oevent=new Function('e','if (!e) e = window.event;return e');

    var obj_move=false;

    function Move_obj(obj){

      var x,y;

      obj_move=true;

      //注册obj对象鼠标按下事件

      D(obj).onmousedown=function(e){

            //取消拖动

            if(!obj_move)return false;

            drag_=true;

            //with(this): 为区域语句设定默认对象。style等价于 this.style

            with(this){

                //obj对象offsetLeft距离左边距离 不包括marginLeft宽度, offsetTop同理

                style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;

                //clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或当前窗口)的水平坐标。

                x=oevent(e).clientX;y=oevent(e).clientY;

                document.onmousemove=function(e){

                  //取消拖动

                  if(!drag_)return false;

                  with(this){

                        //obj距离左边距离 + 外边距 + 鼠标移动距离

                        style.left=temp1-Number(style.marginLeft.substring(0,style.marginLeft.length-2))+oevent(e).clientX-x+"px";

                        style.top=temp2-Number(style.marginTop.substring(0,style.marginTop.length-2)) +oevent(e).clientY-y+"px";

                  }

                }

            }

            document.onmouseup=new Function("drag_=false;obj_move=false;");

      }

    }

    </script>
页: [1]
查看完整版本: JS通用窗口拖动函数