// 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. C#基于联通短信Sgip协议构建短信网关程序

    此软件基于中国联通Sgip协议程序接口,适合在中国联通申请了短信发送端口的公司使用.短信群发已经成为现在软件系统.网络营销等必不可少的应用工具.可应用在短信验证.信息群发.游戏虚拟商品购买.事件提醒. ...

  2. oracle 快速复制一张表,并在此创建索引,日志及并行度

    复制表结构及其数据 create table table_name_new as select * from table_name_old 只复制表结构 create table table_name ...

  3. 如何用VS2017用C++语言写Hello world 程序?

    1,首先,打开VS2017. 2,左上角按文件——新建——项目,或按ctrl+shift+n. 3,按照图片里的选,选完按“确定”. 4,右键“源文件”,再按添加——新建项. 5,剩下的就很简单了,只 ...

  4. python--以1-31的数字作为结尾的列表?论英文好的重要性!

    一.python基础教程第2板(修订版)[代码清单2-1]中有一段要求打印‘以1-31的数字作为结尾的列表’ 截取代码示例:endings =['st','nd','rd'] +17*['th'] + ...

  5. 安全和加密——openssl及自建CA

    一.对称加密算法 对称加密:加密和解密使用共用一个秘钥 特点 加密.解密使用同一个秘钥,效率高: 将原始数据分割成固定大小的块,逐个进行加密 缺点 密钥过多,密钥需要分发 数据来源无法确认 1. 使用 ...

  6. js替换函数用法

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replac ...

  7. CentOS7.2 虚拟机网卡无法启动

    在开机之后,发现网卡没有启动起来,进行了如下操作1.ifup ens33Bringing up interface ens33: Error: Connection activation failed ...

  8. Linux 用户管理(二)

    一.groupadd --create a new group 创建新用户 -g  --gid GID 二.groupdel --delete a group 三.passwd --update us ...

  9. 装逼图片旋转合成demo

    测试背景 bg.jpg 测试图片 a.jpg 结果示例 代码demo <?php $bgImgFileName = 'bg.jpg'; $a = 'a.jpg'; // 初始化 $src = i ...

  10. Python PyAudio 安装使用

    Python PyAudio安装: Python3.7 无法安装pyaudio pip install pyaudio提示error: Microsoft Visual C++ 14.0 is req ...