工作中的乙個專案ui介面比較傳統(chou)，就想著把前端重構一下。內容之一是把導航欄從上方固定高度改為了右側伸縮的邊欄，好處是邊欄可伸縮，占用面積小。不完美的地方是有時候會遮擋頁面上最右邊的按鈕，作為乙個喜歡追求美的人，是可忍孰不可忍，於是決心改掉這個導航欄，讓它可拖拽，如果擋住了就拖一下換個地方，豈不美哉 ？！
本例實際是只上下拖動，全域性自由拖動的話將x座標一起加入計算即可。
說幹就幹，想了下，覺得處理邏輯很清晰：
1、滑鼠放到div上，圖示變成可移動的，最好變成五個小指頭亂抓的小手形；
2、mousedown的時候，觸發事件，記錄div當前位置，滑鼠位置；
3、滑鼠開始移動，mousemove觸發事件，隨時根據滑鼠位置的移動距離修改div的位置；注意mousemove要區分滑鼠左鍵是否按下。
4、到達目的地，mouseup，結束。
注意第三四兩步，第三步的實現有兩種方式：
1、滑鼠按下，div繫結mousemove事件，滑鼠mouseup的時候移除繫結。
2、滑鼠按下，將全域性變數move修改為true，mouseup的時候改為false，mousemove的時候判斷move是否為true，true則進行拖動，否則不作任何動作。
個人認為第一種方式實現較好，第二種雖然為true直接過了，但仍進行了判斷邏輯，相對來說有了多餘操作，總是不好的。
第一版**，aside邊欄div的class：
$(".aside").mousedown(function(e)).mouseup(function(e)).mouseout(function(e)).mousemove(function (e)
return false;
});
return false是為了阻止事件冒泡，防止拖動的時候對外邊的文字進行了「選中」操作；
該版本基本實現了拖動功能，但有個比較嚴重的問題是div移動的有些卡頓，滑鼠拖快了容易跑出div，導致後續的拖動無效。
經查詢資料後，比較一致的說法是事件冒泡導致的，mousemove要一層層冒泡，而且由於是持續觸發導致頁面渲染速度跟不上滑鼠移動速度(這裡理論上是即使每移動乙個畫素觸發一次？實際觀察發現更像是隔一段時間觸發，這個觸發的細節沒查到相關資料)，也就產生了滑鼠脫出div的情況。加上return false阻止冒泡，仍然無效，速度很慢。後來無意翻到大神的文章，發現大神的做法是將mousemove繫結到window物件上，避免了冒泡。趕緊來試一下：
$(".aside").mousedown(function(e))
$(document).mouseup(function(e)).mousemove(function (e)
return false;
});
修改過後，果然拖動效果如絲般順滑。
說明：該部分**是我本地版本，採用的都是全域性變數判斷是否需要移動的做法，可改為mouseup取消事件的方式，但頁面效果差別甚微，暫未改動。更清晰的邏輯請檢視文中不但有思路，而且有多種寫法，還有優化以及一些使用場景的考慮，寫的非常好。
JS實現DIV拖動
可移動可調整大小 預設居中開啟 保留位置上開啟 開啟div 操作說明 選中核取方塊 可移動 可調整大小 後，開啟的div具有移動 調整大小的功能 此時移動 調整大小快捷鍵可使用 反之，不可移動 調整大小 此時移動 調整大小快捷鍵無效 單選框預設居中開啟選中，無論有無儲存div位置和大小均以預設位置及...
DIV拖動效果實現
在這裡謝謝jquery開發者得八輩兒祖宗啊。是他讓編寫js如此之簡單，不廢話了。寫 走著。兄弟記住要引用jquery。下面是實現拖動的核心 想用copy到你那裡，你懂得。function fn.jqresize function h jqdnr e 0,drag function v else e....
JS實現拖動div層移動
js實現拖動div層移動 在談到拖動div層之前，我們有必要來了解下 下面js幾個屬性的區別 pagex，pagey,layerx,layery,clientx,clienty,screenx,screeny,offsetx之間的區別！pagex 滑鼠在頁面上的位置,從頁面左上角開始,即是以頁面為參...