javascript 公用拖拽类代码

更新时间：2008年12月10日 17:47:19 作者：

兼容Event对象等拖拽类代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>D类</title> <style type="text/css"> html, body { margin:0; } </style> <script type="text/javascript"> !!window.__defineGetter__ && !/MSIE/.test(navigator.userAgent) && function () { !window.opera && window.__defineGetter__('event', function () { //兼容Event对象 var o = arguments.callee; do { if (o.arguments[0] instanceof Event) return o.arguments[0]; } while (o = o.caller); return null; }); window.attachEvent = Document.prototype.attachEvent = Element.prototype.attachEvent = function (type, listener, capture) { //兼容attachEvent方法 return this.addEventListener(new String(type).substr(2), listener, capture || false); }; window.detachEvent = Document.prototype.detachEvent = Element.prototype.detachEvent = function (type, listener, capture) { //兼容detachEvent方法 return this.removeEventListener(new String(type).substr(2), listener, capture || false); }; }(); var D = { //拽补助类 lock : false , dom : function () { //document相关属性 return { left : document.documentElement.scrollLeft , top : document.documentElement.scrollTop , width : document.documentElement.clientWidth , height : document.documentElement.clientHeight , body : document.documentElement }; } , mos : function (e) { //获取鼠标绝对位置 var dom = this.dom(); return { 'x' : dom.left + e.clientX, 'y' : dom.top + e.clientY } } , pos : function (o) { //获取元素绝对位置 var x = 0, y = 0; do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent); return { 'x' : x, 'y' : y }; } , start : function (element, startEventHandler, moveEventHandler, stopEventHandler) { //移动开始 if (this.lock) return; else this.lock = true; //先上锁安全。。。:D var pos = this.pos(element) //元素位置 , mos = this.mos(window.event) //鼠标位置 , eventHandlers = { MF : null, EF : null } //事件记录 , property = { x : mos.x - pos.x, y : mos.y - pos.y, left : pos.x, top : pos.y } //属性 , _MF = this.move(moveEventHandler, property) //移动过程事件闭包 , _EF = this.stop(element, stopEventHandler, eventHandlers); //移动停止事件闭包 try { document.selection && document.selection.empty && (document.selection.empty(), 1) || window.getSelection && window.getSelection().removeAllRanges(); } catch (exp) {} document.attachEvent('onmousemove', _MF); //鼠标移动 document.attachEvent('onmouseup', _EF); //鼠标释放 element.setCapture ? (element.setCapture(), element.attachEvent('onlosecapture', _EF)) : window.attachEvent('onblur', _EF); //鼠标捕获丢失则释放 eventHandlers.MF = _MF, eventHandlers.EF = _EF; startEventHandler && startEventHandler(property); //直接传过去。。。请误污染- - } , move : function (moveEventHandler, property) { //移动中 var wc = this; return function (e) { var mos = wc.mos(e || window.event), dom = wc.dom(); window.getSelection && window.getSelection().removeAllRanges(); /MSIE/.test(navigator.userAgent) && function () { //IE滚屏 if (mos.x > dom.left + dom.width) dom.body.scrollLeft = mos.x - dom.width; else if (mos.x < dom.left) dom.body.scrollLeft = mos.x; if (mos.y > dom.top + dom.height) dom.body.scrollTop = mos.y - dom.height; else if (mos.y < dom.top) dom.body.scrollTop = mos.y; }(); property.left = mos.x - property.x, property.top = mos.y - property.y; moveEventHandler && moveEventHandler(property); //直接传过去。。。请误污染- -; }; } , stop : function (element, stopEventHandler, eventHandlers) { //移动结束 var wc = this; return function (e) { document.detachEvent('onmousemove', eventHandlers.MF); document.detachEvent('onmouseup', eventHandlers.EF); element.setCapture ? (element.detachEvent('onlosecapture', eventHandlers.EF), element.releaseCapture()) : window.detachEvent('onblur', eventHandlers.EF); wc.lock = false; //事件都干掉了可以放心解锁了 stopEventHandler && stopEventHandler(); }; } }; </script> </head> <body> <div style="position:relative; width:100px; height:100px; background-color:#000000;"> <div style="position:absolute; width:20px; height:20px; line-height:20px; left:50%; top:50%; margin:-10px 0 0 -10px; background-color:#F00; text-align:center; cursor:move;" onmousedown="var wc = this;D.start(wc, null, function (property) { var node = wc.parentNode; var a = D.pos(node), b = D.pos(wc); node.style.left = property.left - b.x + a.x + 'px'; node.style.top = property.top - b.y + a.y + 'px'; }, null);" >拽</div> </div> <div style="width:50px; height:50px; line-height:50px; text-align:center; background-color:#F00; position:absolute; cursor:move;" onmousedown="var wc = this;D.start(wc, null, function (property) { wc.style.left = property.left + 'px'; wc.style.top = property.top + 'px'; }, null);" >拽</div> <div style="height:1000px;"></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

如何使用big.js解决JavaScript浮点数精度丢失问题
最近在项目中涉及到金额从元转为分（乘100即可）,发现乘法居然也会有精度丢失的问题,关于浮点数计算精度丢失是很多语言都存在的问题,本文给大家分享使用big.js解决JavaScript浮点数精度丢失问题,感兴趣的朋友一起看看吧
2023-12-12
微信js-sdk界面操作接口用法示例
这篇文章主要介绍了微信js-sdk界面操作接口用法,结合实例形式分析了微信界面操作的相关接口功能与使用技巧,需要的朋友可以参考下
2016-10-10
JS实现HTML表格排序功能
这篇文章主要为大家详细介绍了JS实现HTML表格排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
javascript截取字符串(通过substring实现并支持中英文混合)
用js方法substring()、方法substr()实现如标题所示的截取字符串并支持中英文混合，具体代码如下，感兴趣的各位可以参考下哈
2013-06-06
元素绑定click点击事件方法
当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
2015-06-06
javascript常用经典算法实例详解
这篇文章主要介绍了javascript常用算法,结合实例形式较为详细的分析总结了JavaScript中常见的各种排序算法以及堆、栈、链表等数据结构的相关实现与使用技巧,需要的朋友可以参考下
2015-11-11
uni-app中px与rpx的转换方法
这篇文章主要给大家介绍了关于uni-app中px与rpx的转换方法,rpx单位最初由微信推出,它与我们常用px一个很大的区别就是具有响应式,需要的朋友可以参考下
2023-10-10
SOSO地图JS画出标注和中心点以html形式运行
SOSO地图想必大家都知道吧，本文将为大家详细介绍下使用JS画出标注和中心点,直接贴出代码，感兴趣的朋友可以参考下
2013-08-08
一个仿微博登陆邮箱提示框js开发案例
这篇文章主要为大家详细介绍了一个仿邮箱登录提示框js开发案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
微信小程序sessionid不一致问题解决
这篇文章主要介绍了微信小程序sessionid不一致问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08

javascript 公用拖拽类代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具