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 相关文章推荐
js 页面输出值
Nov 30 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
js实现登录与注册界面
Nov 01 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
理解JavaScript中的对象
Aug 25 Javascript
JavaScript实现雪花飘落效果
Dec 27 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 配置文件中open_basedir选项作用
2009/07/19 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
php获取excel文件数据
2017/04/21 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
前端性能优化及技巧
2016/05/06 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[00:10]神之谴戒
2019/03/06 DOTA
Python解决走迷宫问题算法示例
2018/07/27 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
连锁酒店店长职责范本
2014/02/13 职场文书
致100米运动员广播稿
2014/02/14 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
优秀大学生申请书
2019/06/24 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
如何使用pdb进行Python调试
2021/06/30 Python