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创建快捷方式的简单实例
Aug 09 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
Angular的$http与$location
Dec 26 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
基于FME使用Python过程图解
2020/05/13 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
清洁工岗位职责
2014/01/29 职场文书
《大海那边》教学反思
2014/04/09 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
小学运动会报道稿
2014/10/04 职场文书
介绍信范文大全
2015/05/07 职场文书
全国助残日活动总结
2015/05/11 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
基于Python实现西西成语接龙小助手
2022/08/05 Golang