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 相关文章推荐
广告显示判断
Aug 31 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JQuery教学之性能优化
May 14 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
js实现倒计时关键代码
May 05 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
form自动提交实例讲解
2017/07/10 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
javascript实现校验文件上传控件实例
2015/04/20 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
js的各种数据类型判断的介绍
2019/01/19 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
小学校园活动策划
2014/01/30 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
JavaScript中reduce()的用法
2022/05/11 Javascript