|
|
動(dòng)
拖拽效果的頁(yè)面效果演示地址：http://img.jb51.NET/online/tuozhuai/google_drag.htm
加強(qiáng)版效果演示地址：http://img.jb51.NET/online/tuozhuai/google_drag2.htm
拖拽原理：
關(guān)于拖拽的基礎(chǔ)，可以參考這篇文章，講得非常不錯(cuò)。
其實(shí)原理很簡(jiǎn)單，就是把綁定三個(gè)事件：onmousedown , onmousemove , onmouseup。
在鼠標(biāo)點(diǎn)下時(shí)(onmousedown)把元素的坐標(biāo)設(shè)置為鼠標(biāo)的坐標(biāo)，并把 position 設(shè)置為絕對(duì)坐標(biāo)。
在鼠標(biāo)移動(dòng)時(shí)(onmousemove)改變?cè)刈鴺?biāo)。
在鼠標(biāo)彈起時(shí)(onmouseup)取消綁定的事件，并做后續(xù)操作。
Javascript 拖拽下面是關(guān)于仿 google 個(gè)性化主頁(yè)拖拽效果的一個(gè) Demo (需包含 prototype)。 完整下載包：Google
Drag.rar (19.82 KB ,下載:247次)
總共有四個(gè)文件：
google_drag.html
prototype.js
通用拖拽函數(shù) drag.js
仿 google 個(gè)性化主頁(yè)的拖拽 google_drag.js
google_drag.html 中最后幾行中有個(gè)初始化拖拽函數(shù)
window.onload = function(){initDrag();}
必須寫(xiě)成這樣，如果直接寫(xiě)成
window.onload = initDrag();
這樣會(huì)在 IE 下報(bào)個(gè)錯(cuò)誤：尚未實(shí)現(xiàn)
其他代碼可以直接查看源碼，就幾行注釋。其實(shí)就是用 JavaScript 繪制了 15 個(gè) div，然后設(shè)置它們
class 都為drag_div (后面是通過(guò) className 來(lái)判斷元素是否可拖拽)，然后把可拖拽的部分的 ID 設(shè)置
元素的 ID 后加個(gè) _h(也可設(shè)置自己為拖拽部分)
drag.js 是一個(gè)比較通用的拖拽函數(shù)。里面包含四個(gè)最簡(jiǎn)單的函數(shù)：start_Drag, when_Drag, end_Drag,
after_Drag。這四個(gè)函數(shù)只是實(shí)現(xiàn)最基本的拖拽功能，要實(shí)現(xiàn)其他功能可修改或在后面覆蓋掉這些函數(shù)。
google_drag.js 是仿 google 個(gè)性化主頁(yè)拖拽效果的函數(shù)。它覆蓋了上面說(shuō)的那個(gè)四個(gè)函數(shù)，實(shí)現(xiàn)比較
高級(jí)的效果。
拖拽其實(shí)應(yīng)該還是比較簡(jiǎn)單的，實(shí)現(xiàn)完拖拽后就是要用 Ajax 來(lái)傳遞拖拽后的位置，改變服務(wù)器端的值，
這樣下次用戶(hù)訪(fǎng)問(wèn)時(shí)元素才會(huì)位置不變。效果的實(shí)現(xiàn)是非常簡(jiǎn)單的，主要是怎么融合到已有的項(xiàng)目中，從
而提高用戶(hù)體驗(yàn)。
這個(gè) Demo 有一部分參考的網(wǎng)上的代碼。
在網(wǎng)上還有很多這種例子，不過(guò)感覺(jué)效率都沒(méi)這個(gè)高。有一些例子是把所有元素的位置都設(shè)置為
absolute，然后直接修改各個(gè)元素的 top 和left來(lái)顯示效果，感覺(jué)那個(gè)不是很通用，那樣的話(huà)比如我要
把這個(gè)效果修改為一個(gè)數(shù)的拖拽，并且記錄各個(gè)元素之間的位置，比較麻煩。這個(gè)例子中要記錄元素的位
置，只需在拖拽完成后記錄被拖拽元素的 id 以及拖拽到了哪個(gè)元素的前面然后傳給服務(wù)器端去修改就可
以了。
Update 2007-01-26 1:22
加了個(gè)加強(qiáng)版的，效果請(qǐng)看 Demo。其實(shí)就是加了個(gè)函數(shù)，讓他保證左上方那個(gè)大塊只會(huì)有一個(gè)元素，如
果超過(guò)一個(gè)則把后面的擠到下面的第一列去，如果沒(méi)有元素則從下面的第一列拿出第一個(gè)元素放到左上方
的大塊中，如果下面的第一列沒(méi)有元素，則找第二列，第三列。
JavaScript技術(shù)：javascript支持firefox,ie7頁(yè)面布局拖拽效果代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
