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 相关文章推荐
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
vue2中使用less简易教程
Mar 27 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
Vue数据绑定简析小结
May 07 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
JS 基本概念详细介绍
Oct 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
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php的4种常用运行方式详解
2016/12/22 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
javaScript动态添加Li元素的实例
2018/02/24 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python 3.x 新特性及10大变化
2015/06/12 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
实例详解Python装饰器与闭包
2019/07/29 Python
python实例化对象的具体方法
2020/06/17 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
业务员岗位职责
2013/11/16 职场文书
新年爱情寄语
2014/04/08 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
婚礼答谢词范文
2015/09/29 职场文书