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根据内容自适应高度
Oct 28 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
javascript中caller和callee详解
Aug 10 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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
2009/06/29 PHP
PHP函数常用用法小结
2010/02/08 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
10个php函数实用却不常见
2015/10/13 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python中IPYTHON入门实例
2015/05/11 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
Python新手学习装饰器
2020/06/04 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers