// 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.的更多相关文章

  1. [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 ...

  2. Simple drag and drop

    In computer graphical user interfaces, drag-and-drop is the action of (or support for the action of) ...

  3. [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  ...

  4. js 导出Excel

    最近从Silverlight这边转到javascript过来,现在要导出一个导出excel的功能.上级领导指示当页显示多少数据,就导出多少数据,没有必要从后台在去数据.以前也没有接触过这方面的,在网上 ...

  5. 用js完成blog项目

    //前台调用 var $ = function (args) { return new Base(args); } //基础库 function Base(args) { //创建一个数组,来保存获取 ...

  6. 如何系统地学习Node.js?

    转载自知乎:http://www.zhihu.com/question/21567720 ------------------------------------------------------- ...

  7. <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库

    触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...

  8. 介绍一款轻量级js控件:easy.js

    easy.js 组件高速入门 在使用 easy.js 的组件之前,假设能花上几分钟看看以下的一些简单的入门指南,在使用组件的时候你会更加的得心应手. 简单性 easy.js 的组件在 UI(界面) 层 ...

  9. JS怎样将拖拉事件与点击事件分离?

    帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件 <ht ...

随机推荐

  1. cocos2dx lua 热更新方案的实现

    (Upgrade.h) #include <stdio.h> #include "cocos2d.h" #include "framework/utils/U ...

  2. Codeforces Round #513 (rated, Div. 1 + Div. 2)

    前记 眼看他起高楼:眼看他宴宾客:眼看他楼坍了. 比赛历程 开考前一分钟还在慌里慌张地订正上午考试题目. “诶这个数位dp哪里见了鬼了???”瞥了眼时间,无奈而迅速地关去所有其他窗口,临时打了一个缺省 ...

  3. MySQL - INSERT 集合

    范例1: INSERT INTO t_table SELECT ot.* FROM t_other_table ot WHERE ot.is_sent = ? and ot.insert_time & ...

  4. 基于idea创建Tomcat远程调试

    编辑完catalina文件后重启tomcat

  5. ipmitool的使用

    https://www.ibm.com/developerworks/cn/linux/l-ipmi/index.html

  6. SQL Server ALwayson 正在解析

    原因:把主库切换到辅助副本以后,集群全部出现正在解析的情况,数据库显示“恢复挂起” 过程:把服务器重启,原以为正在解析会恢复正常.结果失败. 解决方法:出现“正在解析”的情况跟故障转移群集有关,进故障 ...

  7. vim中,在编辑模式下如何快速移动光标

    编辑 ~/.vimrc 配置文件,加入如下行,编辑模式下自定义的快捷键 inoremap <C-o> <Esc>o  inoremap <C-l> <Righ ...

  8. 带权并查集:HDU3172-Virtual Friends

    Virtual Friends Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...

  9. Linux系统监视工具

    转自      http://bbs.51cto.com/thread-971896-1.html # 1: top – 查看活动进程的命令TOP工具能够实时显示系统中各个进程的资源占用状况.默认情况 ...

  10. Linux压缩与归档

    文件的压缩     aaaaaabbbbccc压缩成为6a4b3c     压缩工具:     gzip/gunzip: .gz后缀         只能压缩文件,不能压缩目录,因其不具备归档功能   ...