js simple drag.
// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/
// zxx.drag v1.0 2010-03-23 å…ƒç´ çš„æ‹–æ‹½å®žçŽ° var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
//获å–相关CSS属性
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
}; //拖拽的实现
var startDrag = function(bar, target, callback){
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
//o是移动对象
bar.onmousedown = function(event){
params.flag = true;
if(!event){
event = window.event;
//防æ¢IEæ–‡å—选ä¸
bar.onselectstart = function(){
return false;
}
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
};
document.onmouseup = function(){
params.flag = false;
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
};
document.onmousemove = function(event){
var e = event ? event: window.event;
if(params.flag){
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
} if (typeof callback == "function") {
callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
}
}
};
js simple drag.的更多相关文章
- [Javascript + rxjs] Simple drag and drop with Observables
Armed with the map and concatAll functions, we can create fairly complex interactions in a simple wa ...
- Simple drag and drop
In computer graphical user interfaces, drag-and-drop is the action of (or support for the action of) ...
- [Node.js]31. Level 7: Redis coming for Node.js, Simple Redis Commands
Let's start practicing using the redis key-value store from our node application. First require the ...
- js 导出Excel
最近从Silverlight这边转到javascript过来,现在要导出一个导出excel的功能.上级领导指示当页显示多少数据,就导出多少数据,没有必要从后台在去数据.以前也没有接触过这方面的,在网上 ...
- 用js完成blog项目
//前台调用 var $ = function (args) { return new Base(args); } //基础库 function Base(args) { //创建一个数组,来保存获取 ...
- 如何系统地学习Node.js?
转载自知乎:http://www.zhihu.com/question/21567720 ------------------------------------------------------- ...
- <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库
触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...
- 介绍一款轻量级js控件:easy.js
easy.js 组件高速入门 在使用 easy.js 的组件之前,假设能花上几分钟看看以下的一些简单的入门指南,在使用组件的时候你会更加的得心应手. 简单性 easy.js 的组件在 UI(界面) 层 ...
- JS怎样将拖拉事件与点击事件分离?
帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件 <ht ...
随机推荐
- 计算机应用第三次作业:自动开机自动关机 常用DOS命令 关于文件文件夹
一.自动开机 台式机启动时按住DEL键 进入一个蓝色的界面,界面上是英文提示 这个界面是BIOS ,是在机器的ROM中存储 二.自动关机 自动重启 方法一在120秒钟后自动关机 win+r (RUN ...
- 51nod——1391 01串(字符串、前缀和)
好像这题是4级题下放2级? 预处理:求每个位置 x 左区间 [ 0 , x ] 中 1 比 0 多的数量和右区间 ( x , n - 1 ] 中 0 比 1 多的数量(少就是负的).相当于求两个前缀和 ...
- 使用apache benchmark(ab) 测试报错: apr_socket_recv: Connection timed out (110)
使用ab( apache benchmark )测试的时候,使用如下命令: ab -n 15000 -c 200 http://localhost/abc/abc.php 执行操作一定条数,或连续 ...
- iPhone如何设置自定义铃声?无需连接电脑,轻松几步就搞定!
转载自: https://baijiahao.baidu.com/s?id=1594988016778457969&wfr=spider&for=pc 受够了iPhone自带的千篇一律 ...
- python-numpy-pandas
目录 numpy 模块 创建矩阵方法: 获取矩阵的行列数 切割矩阵 矩阵元素替换 矩阵的合并 通过函数创建矩阵 矩阵的运算 pandas模块 series (一维列表) DataFrame DataF ...
- 设置vim 永久显示行号
永久显示行号:如果想让vim永久显示行号,则需要修改vim配置文件vimrc.如果没有此文件可以创建一个.在启动vim时,当前用户根目录下的vimrc文件会被自动读取,因此一般在当前用户的根目录下创建 ...
- Counting Cliques HDU - 5952 单向边dfs
题目:题目链接 思路:这道题vj上Time limit:4000 ms,HDU上Time Limit: 8000/4000 MS (Java/Others),且不考虑oj测评机比现场赛慢很多,但10月 ...
- Linux学习-账号管理
新增与移除使用者: useradd, 相关配置文件, passwd, usermod, userdel 我们登入系统时会输入 (1)账号与 (2)密码,所以建立一个可用的账号同样的也需要这两个数据.那 ...
- 使用fio测试磁盘I/O性能
简介: fio是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎,包括:sync,mmap, libaio, posixaio, SG v3, splice, nu ...
- acdsee 15中文版的许可证密钥+激活方法
按以下方法就可以使用了,进入注册表的命令是:开始-运行-输入regedit 进入注册表后按下面的步骤操作就行. ACDSee15中文版激活英文版激活码5NR9CW-SSRMMY-KFWMQU-ZP ...