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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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 str_pad 函数用法简介
2009/07/11 PHP
php修改时间格式的代码
2011/05/29 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
强制设为首页代码
2006/06/19 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Python 用户登录验证的小例子
2013/03/06 Python
Python定时器实例代码
2017/11/01 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python之指数与E记法的区别详解
2019/11/21 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
python3.7添加dlib模块的方法
2020/07/01 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
html5新特性与用法大全
2018/09/13 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
淘宝活动总结范文
2014/06/26 职场文书
商铺门前三包责任书
2014/07/25 职场文书
社会实践活动报告
2015/02/05 职场文书
考试后的感想
2015/08/07 职场文书
上班旷工检讨书
2015/08/15 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
《鲸》教学反思
2016/02/23 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL