你的位置:首页 > Java教程

[Java教程]js拖动层原形版

脚本文件:

function JzDrag(moveDivId, moveDivHandle) {        //        var me = this;        this.M = false; //是否在移动对象        this.DX = { x: 0, y: 0 }; //保存起始位置和元素的位置差        this.Div = document.getElementById(moveDivId); //移动对象        this.Handle = moveDivHandle ? document.getElementById(moveDivHandle) : this.Div; //移动句柄        function GetPos(evt) {          // 获取鼠标位置          evt = evt || window.event;          var xPos = evt.pageX ? evt.pageX : (evt.clientX + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - document.body.clientLeft);          var yPos = evt.pageX ? evt.pageY : (evt.clientY + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - document.body.clientTop);          return { "x": xPos, "y": yPos };        }        function LocaionSave(x, y) {          // 保存临时数据          me.DX.x = parseInt(me.Div.style.left.toString().replace('px', '')) - x;          me.DX.y = parseInt(me.Div.style.top.toString().replace('px', '')) - y;        }        function LocationSet(x, y) {          // 设置移动位置          me.Div.style.left = (x + me.DX.x) + 'px';          me.Div.style.top = (y + me.DX.y) + 'px';        }                function MouseDown(e) {          //          e.preventDefault();          me.M = true;          var pos = GetPos(e);          LocaionSave(pos.x, pos.y);          if (me.Handle.setCapture) {            me.Handle.setCapture();          }          else if (window.captureEvents) {            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);          }        }        function MouseMove(e) {          //          e.preventDefault();          if (me.M == false) return;          var pos = GetPos(e);          LocationSet(pos.x, pos.y);        }        function MouseUp(e) {          //          e.preventDefault();          me.M = false;          if (me.Handle.releaseCapture) {            me.Handle.releaseCapture();          }          else if (window.releaseEvents) {            window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);          }        }        function TouchStart(e) {          //          e.preventDefault();          me.M = true;          var touch = e.touches[0];          LocaionSave(touch.pageX, touch.pageY);        }        function TouchMove(e) {          //          e.preventDefault();          if (me.M == false) return;          var touch = e.touches[0];          LocationSet(touch.pageX, touch.pageY);        }        function TouchEnd(e) {          //          e.preventDefault();          me.M = false;        }        this.Handle.onmousedown = MouseDown;        this.Handle.onmousemove = MouseMove;        this.Handle.onmouseup = MouseUp;        this.Handle.addEventListener("touchstart", TouchStart, false); //事件区分大小写        this.Handle.addEventListener("touchmove", TouchMove, false);        this.Handle.addEventListener("touchend", TouchEnd, false);      }

 页面:

<div id="Div1" >    <h1 id="Div1m" >拖动标题移动</h1>  </div>  <div id="Div2" >    整个移动  </div>

 调用:

new JzDrag('Div1', 'Div1m');new JzDrag('Div2');