在做WEB UI設計的時候，拖動某個HTML元素已經成為一種不能忽視的使用者界面模式，比較典型的應用例子就是Dialog，一個元素是怎麼實作拖動的呢？其實原理非常簡單，要想實作首先得了解幾個基本知識。
寫個簡易的Dialog供拖動測試使用
看起來是醬紫的
為了簡單，這裡就不照顧浏覽器相容性問題了，先基于Chrome實作。上面的Dialog定位夫容器為document，滑鼠event對象包含clientX和clientY兩個屬性，辨別滑鼠目前相對ViewPort（可視視窗）位置，可以在移動的時候改變Dialog的left和top屬性值實作其移動。
這樣拖動效果就實作了，為了確定隻有滑鼠點選Dialog Title的時候才拖動，當滑鼠按下的時候要判斷事件源，如果是Dialog Title區域的話，把isDialogTitle标記設為true，滑鼠移動的時候首先要判斷isDialogTitle，在滑鼠彈起的時候将标記設為false。
親自試過demo的同學肯定可以當開始移動的時候Dialog會跳一下，這是怎麼個情況？仔細看看代碼發現在移動初始，代碼就把Dialog的left和top設為了滑鼠目前位置，可是使用者在拖動的時候不會刻意去點Dialog的左上角，這樣就跳了，soga！改進一下
經過改動後不再跳躍了，但是很暴露的感覺，最開始定義的三個變量都暴露在window下，而且這種寫法相當的沒有通用性，萬一以後Dialog Title變了呢，凡是用過此方法的地方都得改一遍，萬一Title内部還有子元素，點選其子元素的時候怎麼辦？既然如此，穿件衣服封裝一下
包裝一下果真變好看多了，代碼不難看懂，有幾個注意點，Dragging函數的validateHandler參數并不是什麼阿貓阿狗，正如注釋所言為了解決剛才提到幾個需求變更問題，validateHandler是一個自定義函數的句柄，這個函數用于識别點選元素是否觸發移動，是的話需要傳回欲移動元素，這樣就可以靈活的觸發移動并決定移動那個元素了（點選的和移動的不一定是一個），Dragging函數傳回一個對象，對象中有兩個方法，分别可以使元素可移動/禁止移動，看看怎麼使用
首先定義一個識别函數，然後作為參數調用Dragging函數，并調用傳回值的enable方法，這樣元素就可以拖動了。
這種拖動處理方式看起來不錯了，但是還有幾點兒遺憾
1. 前面提到的浏覽器相容性問題，這種寫法在低版本IE浏覽器上是不能運作的
2. 邊界檢查，細心的同學發現Dialog不但可以拖動了，還可以使頁面出現滾動條無限拖動，大部分情況下我們希望Dialog在可視視窗、文檔（固有滾動條内）或者固定區域内拖動，這種方式沒有做到此限制
3. 拖動卡頓，在這個demo中不會出現此問題，文檔結構簡單拖動流暢，可視在龐大的頁面中如果滑鼠移動速度過快，Dialog會跟不上滑鼠，出現卡頓，這時候如果滑鼠在Dialog外面，mouseup事件不會生效，拖動就停不下來，隻能把滑鼠移回Dialog在mouseup
前兩個問題好解決，拓展一下子產品就可以，至于第三個現在還沒想到比較好的解決辦法，十一點了，明天再研究研究，然後一塊兒發出來，晚安。
本文轉自魏瓊東部落格園部落格，原文連結：http://www.cnblogs.com/dolphinX/p/3290520.html，如需轉載請自行聯系原作者