// 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. linux文件或文件夹常见操作

    创建文件夹 mkdir [-p] DirName  在工作目录下,建立一个名为 A 新的子目录 : mkdir A  在工作目录下的 B目录中,建立一个名为 T 的子目录:    若 B 目录不存在, ...

  2. MySQL 使用GTID进行复制

    MySQL 使用GTID进行复制 1. GTID的格式和存储 1.1 GTID 集 1.2 mysql.gtid_executed 表 1.3 mysql.gtid_executed 表压缩 2. G ...

  3. vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数

    Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...

  4. 【windows】win7 sp1 系统语言中英文切换

    注:Windows 7 Ultimate and Windows 7 Enterprise (旗舰版和企业版) 可以直接在控制面板/地区和语言中修改显示语言,其他系统不行 进入网站下载相关的MUI包安 ...

  5. static关键字所导致的内存泄漏问题

    大家都知道内存泄漏和内存溢出是不一样的,内存泄漏所导致的越来越多的内存得不到回收的失手,最终就有可能导致内存溢出,下面说一下使用staitc属性所导致的内存泄漏的问题. 在dalvik虚拟机中,sta ...

  6. LeetCode(228) Summary Ranges

    题目 Given a sorted integer array without duplicates, return the summary of its ranges. For example, g ...

  7. SpringDataJpa错误

    在运行项目的时候出现的错误如下: would dispatch back to the current handler URL [/save] again. Check your ViewResolv ...

  8. day06 面向对象编程

    面向对象: 面向对象: 世界万物,皆可分类 世界万物,皆为对象   只要是对象,就肯定属于某种品类 只要是对象,就肯定有属性         特性: 多态: 一个统一的接口,多种实现  例如:  一个 ...

  9. 深入理解Java虚拟机(精华总结)

    作者:战斗民族就是干 转自:http://www.cnblogs.com/prayers/p/5515245.html 一.运行时数据区域 Java虚拟机管理的内存包括几个运行时数据内存:方法区.虚拟 ...

  10. Selenium WebDriver-操作键盘事件

    # 注意: !!!操作操作系统的按键,需要先装pywin32,然后通过交互模式import win32api和import win32con判断是否安装成功,需要重启下cmd进入交互模式# 下载链接: ...