js 鼠标拖动对象 可让任何div实现拖动效果


Posted in Javascript onNovember 09, 2009

js鼠标拖动对象:

//定义鼠标拖动对象 
drag=function (a,o){ 
     var d=document;if(!a)a=window.event; 
        if(!a.pageX)a.pageX=a.clientX; 
        if(!a.pageY)a.pageY=a.clientY; 
     var x=a.pageX,y=a.pageY; 
     if(o.setCapture) 
         o.setCapture(); 
     else if(window.captureEvents) 
         window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
     var backData = {x : o.style.top, y : o.style.left}; 
     d.onmousemove=function(a){ 
         if(!a)a=window.event; 
         if(!a.pageX)a.pageX=a.clientX; 
         if(!a.pageY)a.pageY=a.clientY; 
         var tx=a.pageX-x+parseInt(o.style.left),ty=a.pageY-y+parseInt(o.style.top); 
         o.style.left=tx+"px"; 
         o.style.top=ty+"px"; 
            x=a.pageX; 
            y=a.pageY; 
     }; 
     d.onmouseup=function(a){ 
         if(!a)a=window.event; 
         if(o.releaseCapture) 
             o.releaseCapture(); 
         else if(window.captureEvents) 
             window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
         d.onmousemove=null; 
         d.onmouseup=null; 
         if(!a.pageX)a.pageX=a.clientX; 
         if(!a.pageY)a.pageY=a.clientY; 
         if(!document.body.pageWidth)document.body.pageWidth=document.body.clientWidth; 
         if(!document.body.pageHeight)document.body.pageHeight=document.body.clientHeight; 
         if(a.pageX < 1 || a.pageY < 1 || a.pageX > document.body.pageWidth || a.pageY > document.body.pageHeight){ 
             o.style.left = backData.y; 
             o.style.top = backData.x; 
         } 
     }; 
}

使用方法:
<div id="divPhoto" onmousedown="drag(event,this)"></div>
Javascript 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
实例讲解React 组件
Jul 07 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 #Javascript
JQuery 图片延迟加载并等比缩放插件
Nov 09 #Javascript
让Firefox支持event对象实现代码
Nov 07 #Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 #Javascript
JavaScript 变量基础知识
Nov 07 #Javascript
表格 隔行换色升级版
Nov 07 #Javascript
csdn 论坛技术区平均给分功能
Nov 07 #Javascript
You might like
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python文件及目录操作实例详解
2015/06/04 Python
详解Python中的Cookie模块使用
2015/07/06 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
python实现简单图书管理系统
2019/11/22 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
房地产还款计划书
2014/01/10 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
计算机实训报告总结
2014/11/05 职场文书
考研经验交流会策划书
2015/11/02 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers