js 頁面模塊自由拖動(dòng)實(shí)例

更新時(shí)間：2009年03月31日 00:18:56 作者：

js頁面模塊自由拖動(dòng)實(shí)例代碼

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js頁面模塊自由拖動(dòng)</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> 用鼠標(biāo)移動(dòng)TD(本代碼也適合用鼠標(biāo)進(jìn)行其它對(duì)象的對(duì)換（如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需再刷新一下頁面才能執(zhí)行]

相關(guān)文章

JS實(shí)現(xiàn)網(wǎng)頁百葉窗效果
JS實(shí)現(xiàn)網(wǎng)頁百葉窗特效代碼，百葉窗JS代碼，你預(yù)覽一下效果就明白了，由上到下交叉切換的網(wǎng)頁特效，像百葉窗關(guān)上的效果，百葉窗效果在各種編程代碼里都有應(yīng)用，確實(shí)是一個(gè)經(jīng)典的效果
2013-03-03
JavaScript實(shí)現(xiàn)漸變色效果(不使用圖片)
JavaScript漸變色，不使用圖片實(shí)現(xiàn)漸變色，這樣有利的節(jié)省了時(shí)間省去使用圖片的麻煩，而且占用資源極小，漸變色也均勻漂亮，我看了都目瞪口呆，非常值得學(xué)習(xí)哦，接下來為您詳細(xì)介紹
2012-12-12
圖片與文字半透明效果鼠標(biāo)移上不透明
圖片與文字結(jié)合的半透明效果，在正常狀態(tài)下，一張圖片的上面顯示文字，為了區(qū)分背景，文字下方又重新布置了一個(gè)DIV
2009-10-10
類似GMAIL的Ajax信息反饋顯示
類似GMAIL的Ajax信息反饋顯示，大家可以測試下。也方便調(diào)用。
2010-02-02
JS+CSS實(shí)現(xiàn)的一種交互體驗(yàn) 表單頁面
JavaScript+CSS實(shí)現(xiàn)精致的、符合標(biāo)準(zhǔn)的表單效果，鼠標(biāo)點(diǎn)擊輸入框，立即會(huì)提示用戶該輸入框的填寫要求，色彩搭配也極和諧，我喜歡。
2009-12-12
JS控制按鈕自動(dòng)切換背景顏色(可暫停)
JS控制按鈕自動(dòng)切換背景顏色，可暫停并且方便獲取當(dāng)前背景顏色,需要的朋友可以參考下
2012-10-10
網(wǎng)頁背景漸變效果代碼
網(wǎng)頁背景漸變效果代碼...
2007-04-04
js實(shí)現(xiàn)的跟隨鼠標(biāo)移動(dòng)的時(shí)鐘效果(中英文日期顯示)
js實(shí)現(xiàn)的跟隨鼠標(biāo)移動(dòng)的時(shí)鐘效果，網(wǎng)上的很多代碼都是錯(cuò)誤，這里特別為大家整理個(gè)能用的。
2011-01-01
CSS 直方圖布局示例
利用CSS布局一個(gè)直方圖，可能比較實(shí)用，主要是考驗(yàn)使用CSS布局的能力，看看效果吧。
2009-11-11
javascript背景顏色按時(shí)變換
javascript背景顏色按時(shí)變換...
2007-05-05