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