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" 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');
js拖动层原形版的更多相关文章
- js拖动层
模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...
- JQuery 拖动层
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- JS拖动DIV布局
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 在chrome下鼠标拖动层变文本形状的问题
学JQ也有一段时间了,想自己写个鼠标拖动层移动的效果(很简单,只是为了练习而已)于是就写下了下面的代码 <!DOCTYPE html> <html> <head> ...
- 微信小程序-05-详解介绍.js 逻辑层文件
上一篇介绍了关于.json 的配置文件,本篇介绍关于.js 逻辑层文件 微信小程序-05-详解介绍.js 逻辑层文件 宝典官方文档: https://developers.weixin.qq.com/ ...
- h5滑动方向、手机拖动层
做h5时需对手指滑动方向判断及拖动浮动层,本文代码适用于手机端h5页面,pc页面可使用onMouseDown.onMouseUp.onMouseMove.(本方法仅为功能实现原理和演示,可根据自己的需 ...
- 微信小程序-06-详解介绍.js 逻辑层文件-注册页面
上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...
- JS 拖动原理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js操作文件 HTML5版
js操作文件 HTML5版,有需要的朋友可以参考下. <!DOCTYPE html> <html> <head> <title>JSFileReader ...
随机推荐
- CentOS6.5上Oracle11gR2静默安装
一.环境准备环境 操作系统:CentOS release 6.5 (Final) 内核版本:2.6.32-431.el6.x86_64 物理内存:2G(必须大于1G) swap分区:3G(必须大于3G ...
- linux下根据进程名字获取PID,类似pidof(转)
linux有一个命令行工具叫做pidof,可以根据用户输入的进程名字查找到进程号,但有时候我们需要在程序里实现,不想调用system,在查阅了很多版本的pidof源代码后,没有发现一个自己感觉比较好的 ...
- springMVC 返回json 忽略类中属性的注解
该注解使用在 类名,接口头上 @JsonIgnoreProperties(value={"comid"}) //希望动态过滤掉的属性 该注解使用在get方法头上 @JsonIgno ...
- CE 进程同步-事件
事件(event)分为有名的和无名的,使用有名事件的时候,在不同进程中创建的同名事件,其实就是同一个,这样就可以在不同的进程中使用了.两个进程里面都要创建事件,事件名要一致. //进程1 HANDLE ...
- 【转载】Chaotic Time-Series Prediction
原文地址:https://cn.mathworks.com/help/fuzzy/examples/chaotic-time-series-prediction.html?requestedDomai ...
- UVA-11517 Exact Change(DP)
题目大意:有n张钞票,面值可能不同.你要买一件东西,可能需要找零钱.问最少付多少钱,并求出最少的钞票张数. 题目分析:定义状态dp(i,w)表示前i张钞票凑成w元需要的最少钞票张数.则状态转移方程为d ...
- (转)LINUX测试环境部署Redis(四)
安装配置Redis 第一部分:安装redis 希望将redis安装到此目录 1 /usr/local/redis 希望将安装包下载到此目录 1 /usr/local/src 那么安装过程指令如下: ...
- malloc原理和内存碎片[转]
当一个进程发生缺页中断的时候,进程会陷入内核态,执行以下操作: 1.检查要访问的虚拟地址是否合法 2.查找/分配一个物理页 3.填充物理页内容(读取磁盘,或者直接置0,或者啥也不干) 4.建立映射关系 ...
- unity 内存中切割图片
一般的说我们切割图片是将一张图片资源切割成更小的图片资源,也就是说在资源上就进行了切割,比如ugui上的切割方法. 如果我们有一些情况比如做拼图,可能让玩家自己选择自己的生活照作为拼图的原图. 那么我 ...
- WAMPSERVER PHP版本5.3的降到 5.2?
在这里下载5.2版本PHP,http://sourceforge.net/projects/wampserver/files/WampServer%202%20-%20Extensions/PHP/下 ...