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 checkbox,radio是否选中的判断代码
Mar 20 Javascript
js异常捕获方法介绍
Apr 10 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
详解Node 定时器
Feb 26 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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
239军机修复记
2021/03/02 无线电
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
强制设为首页代码
2006/06/19 Javascript
jQuery 技巧小结
2010/04/02 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
Python ZipFile模块详解
2013/11/01 Python
Python变量和字符串详解
2017/04/29 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Python读写文件基础知识点
2019/06/10 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
英国电子专家:maplin
2019/09/04 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
我的理想演讲稿
2014/04/30 职场文书
大学生毕业求职信
2014/06/12 职场文书
教室布置标语
2014/06/26 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2014年工商所工作总结
2014/12/09 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS