js實現(xiàn)完美拖拽效果可拖動層與回放拖動規(guī)跡并顯示拖動距離參數(shù)

更新時間：2012年12月26日 10:18:49 作者：

一個完美的JS拖拽功能，實現(xiàn)層在網(wǎng)頁上任意拖動，還可回放拖動規(guī)跡，而且在拖動時顯示拖動距離參數(shù)等相關(guān)屬性。經(jīng)本人測試兼容性也是相當不錯的代碼，學習JavaScript的朋友，可以拿來研究研究，您可不要錯過哦

<!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=utf-8" /> <title>完美拖拽</title> <style type="text/css"> html,body{overflow:hidden;} body,div,h2,p{margin:0;padding:0;} body{color:#fff;background:#000;font:12px/2 Arial;} p{padding:0 10px;margin-top:10px;} span{color:#ff0;padding-left:5px;} #box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;} #box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;} #box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;} </style>  </head> <body> <div   class="ublnpf9mb"   id="box"> <h2><a href="javascript:;">點擊回放拖動軌跡</a></h2> <p><strong>Drag:</strong><span></span></p> <p><strong>offsetTop:</strong><span></span></p> <p><strong>offsetLeft:</strong><span></span></p> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

js實現(xiàn)完美拖拽效果可拖動層與回放拖動規(guī)跡并顯示拖動距離參數(shù)
一個完美的JS拖拽功能，實現(xiàn)層在網(wǎng)頁上任意拖動，還可回放拖動規(guī)跡，而且在拖動時顯示拖動距離參數(shù)等相關(guān)屬性。經(jīng)本人測試兼容性也是相當不錯的代碼，學習JavaScript的朋友，可以拿來研究研究，您可不要錯過哦
2012-12-12
純CSS實現(xiàn)撲克牌效果
純CSS實現(xiàn)撲克牌效果，太牛了吧？開始我還以為是一張圖片呢，后來發(fā)現(xiàn)代碼里沒有調(diào)用任何圖片，頓時有點詫異，CSS果然很牛，或是作者水平比較牛？
2010-09-09
帶你快速上手前端響應式布局與Bootstrap柵格系統(tǒng)
這篇文章帶你快速上手前端響應式布局與Bootstrap柵格系統(tǒng),響應式布局主要是針對各種不同尺寸的屏幕兼容性問題,需要的朋友可以參考下
2023-03-03
代碼非常簡潔且兼容多瀏覽器的拖動層實現(xiàn)代碼
代碼非常簡潔且兼容多瀏覽器的拖動層的實現(xiàn)代碼，需要的朋友可以參考下。
2011-01-01
JS實現(xiàn)用鍵盤控制DIV上下左右+放大縮小與變色
用鍵盤控制DIV，紅色方塊為鍵盤操作區(qū)域，您可以進行如下操作:左右控制;背景變?yōu)榫G色;背景變?yōu)辄S色;背景變?yōu)樗{色放大或縮小
2012-12-12
基于jQuery的彈出隱藏層的窗口特效
jQuery彈出隱藏層的窗口特效，缺少了幾個小圖片，這個自己制作幾個補上去吧，這不是關(guān)鍵的東西。
2011-08-08
基于jQuery實現(xiàn)下拉收縮(展開與折疊)特效
jQuery下拉收縮特效，點擊下邊那個按鈕，就可實現(xiàn)下拉的效果，也叫展開與折疊的效果，使用了jQuery插件，如何不習慣使用jquery插件的朋友當然使用純Js也能實現(xiàn)哦，但是jquery現(xiàn)在這么流行，值得學習一下哦
2012-12-12
兼容性非常好的js右下角與漂浮廣告代碼
兼容性非常好的js右下角與漂浮廣告代碼，需要的朋友可以參考下。
2010-11-11
始終在頁面底部的層js實現(xiàn)代碼
其實就是通過js將層始終定位在底部，多用于提示效果
2012-11-11
js超漂亮的鼠標提示，帶人性化缺口
漂亮的鼠標提示，帶人性化缺口，在測試時候大家可改變?yōu)g覽器窗口大小，可以看到缺口會根據(jù)網(wǎng)頁的大小智能改變方向，以確保提示位置的正確性，其實由此大家可以學習到更多的JavaScript與CSs代碼知識。
2010-11-11