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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
JS控制表单提交的方法
Jul 09 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
关于微信小程序登录的那些事
Jan 08 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
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
小程序红包雨的实现示例
2019/02/19 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python实现可逆简单的加密算法
2019/03/22 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
化工专业个人的求职信范文
2013/11/28 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
超市食品安全承诺书
2015/04/29 职场文书
驳回起诉裁定书
2015/05/19 职场文书
建国大业电影观后感
2015/06/01 职场文书
教师研修随笔感言
2015/11/18 职场文书