Ghost全自动系统备份光盘正式版 V4.5 | 硬盘版 V2.0 | 排行榜 TOP50 | 图文推荐 | 玩小游戏

设为首页
加入收藏
联系站长

首页 >> 下载中心 >> JavaScript源码 >> 一个兼容好的js拖拽代码

一个兼容好的js拖拽代码

作者:winter 来源:无忧脚本时间:2008-5-4 网友评论条【大中小】

无聊，写了个拖拽代码

函数名：startdrag
说明：开始一段拖动行为，检查拖动行为的过程和终止并响应相应的事件。
参数：
parent        DOM对象，拖动所属的父对象，必需是容器，可以为document.body
onmove        函数对象，事件，拖动开始后，鼠标移动触发事件
onfinish    函数对象，事件，拖动结束时，触发事件一次
area        对象，可以缺省，必须包含4个属性top left width height，以指定鼠标移动的有效范围，默认值为parent的全部范

特色是比较封装比较灵活附件里演示了各种变形

最重要的是兼容IE6/IE7/FF/OP/SAFARI/NS

<style> .dragArea{ background-color:blue; filter:alpha(opacity=50); -moz-opacity:0.5; } body{ margin:0px; } </style> <body> <div style="top:0px;left:0px;width:100px;height:100px;position:absolute;background:black;" onselectstart="return false;" onmousedown="mousedown.apply(this,arguments);"> </div> </body> <script type="text/javascript"> /*********************************************************************** * 函数名：startdrag * 说明：开始一段拖动行为，检查拖动行为的过程和终止并响应相应的事件。 * 参数： * parent DOM对象，拖动所属的父对象，必需是容器，可以为document.body * onmove 函数对象，事件，拖动开始后，鼠标移动触发事件 * onfinish 函数对象，事件，拖动结束时，触发事件一次 * area 对象，可以缺省，必须包含4个属性top left width height，以指定鼠标移动的有效范围，默认值为parent的全部范围。 ***********************************************************************/ function startdrag(parent,onmove,onfinish,area) { var up,out,over; var divarea=document.createElement("div"); if(!area)area={ "top":"0px", "left":"0px", "width":"100%", "height":"100%" } divarea.style.position="absolute"; divarea.style.top=area.top; divarea.style.left=area.left; divarea.style.width=area.width; divarea.style.height=area.height; divarea.style.overflow="hidden"; divarea.style.zIndex="10000"; divarea.className="dragArea"; parent.appendChild(divarea); if(divarea.attachEvent) { divarea.attachEvent("onmousemove",onmove) document.attachEvent("onmouseup",up=function(){ divarea.detachEvent("onmousemove",onmove); document.detachEvent("onmouseup",up); divarea.detachEvent("onmouseout",out); parent.removeChild(divarea); onfinish(event||arguments[0]); }); divarea.attachEvent("onmouseout",out=function(){ divarea.detachEvent("onmousemove",onmove); document.detachEvent("onmouseup",up); divarea.detachEvent("onmouseout",out); parent.removeChild(divarea); onfinish(event||arguments[0]); }); } else if(divarea.addEventListener) { divarea.addEventListener("mousemove",onmove,true); document.addEventListener("mouseup",up=function(){ divarea.removeEventListener("mousemove",onmove,true); document.removeEventListener("mouseup",up,true); divarea.removeEventListener("mouseout",out,true); parent.removeChild(divarea); onfinish(event||arguments[0]); },true); divarea.addEventListener("mouseout",out=function(){ //alert("out"); divarea.removeEventListener("mousemove",onmove,true); document.removeEventListener("mouseup",up,true); divarea.removeEventListener("mouseout",out,true); parent.removeChild(divarea); onfinish(event||arguments[0]); },true); } } </script> <script type="text/javascript"> function mousedown() { var e=arguments[0]||event; var me=this; var dy=e.clientY-parseInt(me.style.top); var dx=e.clientX-parseInt(me.style.left); startdrag( document.body, function(e){ e=e||event; if(e.clientY-dy<0||e.clientY-dy>parseInt(document.body.clientHeight)-100)return; if(e.clientX-dx<0||e.clientX-dx>parseInt(document.body.clientWidth)-100)return; me.style.top=e.clientY-dy; me.style.left=e.clientX-dx; }, function(e){ } ); } </script> [提示：你可先修改部分代码，再按运行]

更多拖拽效果打包下载地址：dragDemo.rar （4.65 KB）

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/download/javascript/20085/36734.htm

站长工具

相关文章

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

Aspxhome.com. 中国Asp之家. 版权所有

闽ICP备06017341号