js 页面模块自由拖动实例

更新时间：2009年03月31日 00:18:56 作者：

js页面模块自由拖动实例代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js页面模块自由拖动</title> <style> .removableObj { height:25;position:relative; } </style> <script language="javascript"> var beginMoving=false; var sourceObj=null; var objectObj=null; function MouseDownToMove(obj){ obj.style.zIndex=1; obj.mouseDownY=event.clientY; obj.mouseDownX=event.clientX; beginMoving=true; obj.setCapture(); sourceObj=obj; objectObj=null; } function MouseMoveToMove(obj){ if(!beginMoving) return false; obj.style.top = (event.clientY-obj.mouseDownY); obj.style.left = (event.clientX-obj.mouseDownX); } function MouseUpToMove(obj){ if(!beginMoving) return false; obj.releaseCapture(); obj.style.top=0; obj.style.left=0; obj.style.zIndex=0; beginMoving=false; window.setTimeout("swapFun()",10); } function MouseOverFun(obj) { objectObj=obj; } function swapFun() { if(sourceObj!=null && objectObj!=null ) sourceObj.swapNode(objectObj); sourceObj=null; objectObj=null; } </script> </head> <body> 用鼠标移动TD(本代码也适合用鼠标进行其它对象的对换（如table,div等）) <table border="1" width="300"> <tr> <td bgcolor=red class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >a1</td> <td bgcolor=blue class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >a2</td> </tr> <tr> <td bgcolor=#cccccc class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >b1</td> <td bgcolor=#eeeeee class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >b2</td> </tr> </table> </body> </html>

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

JS实现网页百叶窗效果
JS实现网页百叶窗特效代码，百叶窗JS代码，你预览一下效果就明白了，由上到下交叉切换的网页特效，像百叶窗关上的效果，百叶窗效果在各种编程代码里都有应用，确实是一个经典的效果
2013-03-03
JavaScript实现渐变色效果(不使用图片)
JavaScript渐变色，不使用图片实现渐变色，这样有利的节省了时间省去使用图片的麻烦，而且占用资源极小，渐变色也均匀漂亮，我看了都目瞪口呆，非常值得学习哦，接下来为您详细介绍
2012-12-12
图片与文字半透明效果鼠标移上不透明
图片与文字结合的半透明效果，在正常状态下，一张图片的上面显示文字，为了区分背景，文字下方又重新布置了一个DIV
2009-10-10
类似GMAIL的Ajax信息反馈显示
类似GMAIL的Ajax信息反馈显示，大家可以测试下。也方便调用。
2010-02-02
JS+CSS实现的一种交互体验表单页面
JavaScript+CSS实现精致的、符合标准的表单效果，鼠标点击输入框，立即会提示用户该输入框的填写要求，色彩搭配也极和谐，我喜欢。
2009-12-12
JS控制按钮自动切换背景颜色(可暂停)
JS控制按钮自动切换背景颜色，可暂停并且方便获取当前背景颜色,需要的朋友可以参考下
2012-10-10
网页背景渐变效果代码
网页背景渐变效果代码...
2007-04-04
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
js实现的跟随鼠标移动的时钟效果，网上的很多代码都是错误，这里特别为大家整理个能用的。
2011-01-01
CSS 直方图布局示例
利用CSS布局一个直方图，可能比较实用，主要是考验使用CSS布局的能力，看看效果吧。
2009-11-11
javascript背景颜色按时变换
javascript背景颜色按时变换...
2007-05-05

js 页面模块自由拖动实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具