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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
js分页工具实例
Jan 28 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
Zend studio文件注释模板设置方法
2013/09/29 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
聊聊Python中的pypy
2018/01/12 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
Django 静态文件配置过程详解
2019/07/23 Python
python3 深浅copy对比详解
2019/08/12 Python
pycharm修改file type方式
2019/11/19 Python
Python with标签使用方法解析
2020/01/17 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
违反课堂纪律检讨书
2014/01/19 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
公民授权委托书
2014/10/15 职场文书
领导班子整改措施
2014/10/24 职场文书
世界地球日活动总结
2015/02/09 职场文书
实习证明模板
2015/06/16 职场文书
图书馆义工感想
2015/08/07 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
js之ajax文件上传
2021/05/13 Javascript
详解Python类和对象内容
2021/06/22 Python