脚本文件:function JzDrag(moveDivId, moveDivHandle) { // var me = this; this.M = false; //是否在移动对象 this.DX = { x: 0, y ...
脚本文件:
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); }
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:js拖动层原形版
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。