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 ...
随机推荐
- C#数组协方差
对于任意两个“引用类型”A和B,如果存在从A到B的隐式引用转换或显式引用转换,则也一定存在从数组类型A[R]到数组类型B[R]的相同的引用转换,其中R可以是任何给定的“秩说明符”,但是这两个数组类型必 ...
- Windows上PostgreSQL安装配置教程
Windows上PostgreSQL安装配置教程 这篇文章主要为大家详细介绍了Windows上PostgreSQL安装配置教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 PostgreSQL的 ...
- 转 fine-tuning (微调)
https://blog.csdn.net/weixin_42137700/article/details/82107208
- (68)zabbix windows性能计数器使用详解
概述 windows下的性能计数器让zabbix监控更加轻松,直接获取性能计数器的数值即可完成windows监控.性能计数器如下: 1 perf_counter["\Processor( ...
- windows下配置Nginx支持php
编辑配置文件nginx.conf worker_processes 1; events { worker_connections 1024; } http { include mime.types; ...
- python模块之shutil和zipfile
shutil 模块 高级的 文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length])将文件内容拷贝到另一个文件中 import shutil s ...
- JAVA基础篇—Servlet小结
一.get请求和post请求的区别: 1.get请求是通过url传递参数,post请求是通过请求体传递参数的 2.get请求最多允许传递255个字符,对长度有限制,所以数据比较大的时候我们使用post ...
- printk的使用技巧
在 linux/kernel.h 中有相应的宏对应. #define KERN_EMERG "<0>" /* system is unusable */#d ...
- cf 1017C
C. The Phone Number time limit per test 1 second memory limit per test 256 megabytes input standard ...
- poj 3614 伪素数问题
题意:1.p不是素数 2.(a^p)%p=a 输出yes 不满足输出no 思路: 判断素数问题,直接暴力判断 bool is_prime(int n) { for(int i=2;i*i<= ...