脚本文件:

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" style="position:absolute;background-color:#FF4F0F; left:50px; top:60px; width:160px;height:80px;">
<h1 id="Div1m" style="line-height:30px; background-color:#f3f3f3;">拖动标题移动</h1>
</div> <div id="Div2" style="position:absolute;background-color:#FF4F0F; left:150px; top:160px; width:160px;height:80px;">
整个移动
</div>

调用:

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

最新文章

  1. Tarjan
  2. 怎么解决xp系统不能安装NET Framework4.0?
  3. 5个示例带你学习AngularJS
  4. rman恢复误删除的一张表(不完全恢复)
  5. 调试 rewrite
  6. gzip压缩JavaScript
  7. jsp页面用el表达式获取枚举的code
  8. OLEDB读取EXCEL表格时,某些字段为空,怎么办?
  9. 黑马入学基础测试(三)求斐波那契数列第n项,n&lt;30,斐波那契数列前10项为 1,1,2,3,5,8,13,21,34,55
  10. KVO的实现原理探寻
  11. tomcat异常
  12. php __set()和__get()函数
  13. C# 指定父層級目錄
  14. iOS开发之虾米音乐频道选择切换效果分析与实现
  15. ddt源码修改:HtmlTestRunner报告依据接口名显示用例名字
  16. BZOJ4003[JLOI2015]城池攻占——可并堆
  17. /bin/bash^M:损坏的解释器: 没有那个文件或目录
  18. codeforces-707 C. Pythagorean Triples
  19. 二叉苹果树|codevs5565|luoguP2015|树形DP|Elena
  20. MAC apache服务器搭建

热门文章

  1. 【引】objective-c,3:关于block
  2. IOS 关键字self,super,copy, retain, assign , readonly , readwrite, nonatomic、 @synthesize、@property、@dynamic
  3. tomcat从 http转成https,并且去掉端口号
  4. nginx入门篇----nginx服务器基础配置
  5. 042. asp.net使用缓存来提高母版页的访问性能
  6. securityCRT mongoDB 命令行删除(backspace/delete)无效问题
  7. 调用约定__cdecl和__stdcall
  8. Linux 随机生成随机数
  9. [Linux] 安装JBoss - CentOS
  10. VR全景项目外包团队— VR/AR相关领域介绍和VR全景案例