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 相关文章推荐
js日期时间补零的小例子
Mar 05 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
vue--vuex详解
Apr 15 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
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
window.open()弹出居中的窗口
2007/02/01 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
jquery实现的分页显示功能示例
2019/08/23 jQuery
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
替换python字典中的key值方法
2018/07/06 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python数据分析:关键字提取方式
2020/02/24 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
行政副总岗位职责
2014/02/23 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
党员争先创优承诺书
2015/01/20 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python