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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 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 FPDF类库应用实现代码
2009/03/20 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
Django使用Celery异步任务队列的使用
2018/03/13 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python实现马丁策略的实例详解
2021/01/15 Python
Python操作Excel的学习笔记
2021/02/18 Python
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
电大自我鉴定范文
2013/10/01 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
赢在执行观后感
2015/06/16 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python