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 相关文章推荐
range 标准化之获取
Aug 28 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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
c#中的实现php中的preg_replace
2009/12/21 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
让元素在网页中可拖动示例代码
2013/08/13 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
详解javascript void(0)
2020/07/13 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
Python bisect模块原理及常见实例
2020/06/17 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
公共事业管理本科生求职信
2013/10/07 职场文书
新三好学生主要事迹
2014/01/23 职场文书
给校长的建议书200字
2014/05/16 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
停电通知范文
2015/04/16 职场文书
学习委员竞选稿
2015/11/20 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python