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 ...
随机推荐
- cocos2dx lua 热更新方案的实现
(Upgrade.h) #include <stdio.h> #include "cocos2d.h" #include "framework/utils/U ...
- Codeforces Round #513 (rated, Div. 1 + Div. 2)
前记 眼看他起高楼:眼看他宴宾客:眼看他楼坍了. 比赛历程 开考前一分钟还在慌里慌张地订正上午考试题目. “诶这个数位dp哪里见了鬼了???”瞥了眼时间,无奈而迅速地关去所有其他窗口,临时打了一个缺省 ...
- MySQL - INSERT 集合
范例1: INSERT INTO t_table SELECT ot.* FROM t_other_table ot WHERE ot.is_sent = ? and ot.insert_time & ...
- 基于idea创建Tomcat远程调试
编辑完catalina文件后重启tomcat
- ipmitool的使用
https://www.ibm.com/developerworks/cn/linux/l-ipmi/index.html
- SQL Server ALwayson 正在解析
原因:把主库切换到辅助副本以后,集群全部出现正在解析的情况,数据库显示“恢复挂起” 过程:把服务器重启,原以为正在解析会恢复正常.结果失败. 解决方法:出现“正在解析”的情况跟故障转移群集有关,进故障 ...
- vim中,在编辑模式下如何快速移动光标
编辑 ~/.vimrc 配置文件,加入如下行,编辑模式下自定义的快捷键 inoremap <C-o> <Esc>o inoremap <C-l> <Righ ...
- 带权并查集:HDU3172-Virtual Friends
Virtual Friends Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- Linux系统监视工具
转自 http://bbs.51cto.com/thread-971896-1.html # 1: top – 查看活动进程的命令TOP工具能够实时显示系统中各个进程的资源占用状况.默认情况 ...
- Linux压缩与归档
文件的压缩 aaaaaabbbbccc压缩成为6a4b3c 压缩工具: gzip/gunzip: .gz后缀 只能压缩文件,不能压缩目录,因其不具备归档功能 ...