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 相关文章推荐
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
Three.js学习之网格
Aug 10 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
js实现简单的轮播图效果
Dec 13 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中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
ext jquery 简单比较
2010/04/07 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
对python中的iter()函数与next()函数详解
2018/10/18 Python
python读取文件名并改名字的实例
2019/01/07 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
Linux文件操作命令都有哪些
2015/02/27 面试题
优秀社区干部事迹材料
2014/02/03 职场文书
土木工程求职信
2014/05/29 职场文书
个人作风建设总结
2014/10/23 职场文书
未婚证明范本
2015/06/15 职场文书
六五普法学习心得体会
2016/01/21 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
把77A收信机改造成收音机
2022/04/05 无线电
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript