本文是錯新技術頻道小編為大家帶來的鼠標拖拽移動子窗體的JS實現，其實鼠標拖拽的變化是很有技巧的，別著急，小編將帶大家細細了解，希望能幫到大家。

1.子窗體

在設計網站的時候，我們需要設計一些模態的子窗體，比如

這一步很容易實現，只需要div+css就ok了，請看代碼：

?

?

?

加上上述html和css就可以很容易實現上述模態窗體的效果。其中left: 50%;top: 50%; margin-left: -160px; margin-top: -160px;是為了實現這個模態窗體的居中效果。

當然，模態窗體的大小在樣式類.modal-window中是固定寫好的了，這并不是說不可修改模態窗體的大小，比如我寫如代碼：

?

?

在第二行代碼中追加了.list-window這個樣式類來覆蓋.modal-window類中的大小和位置，但同時保證模態窗體居中顯示

?

如圖

可以看得出來，這一步的實現是非常簡單的，掌握幾個關鍵行的css屬性就"完虐"這個模態子窗體，各類其它的模態子窗體可以舉一反三咯。

2.當鼠標點住子窗體的頭部時，如何實現子窗體的拖拽移動呢？當引入jQ后，我們只需要很少的腳本就搞定這個小功能。不信我們看

?

?

這段代碼非常簡短，能否在各種瀏覽器中很流暢的運行。

其實它的實現原理非常簡單，大致分為三步：

①當鼠標在模態窗體頭部點下(mousedown)時，立即給document綁定mousemove和mouseup事件

②當鼠標沒有彈起時(沒有mouseup)時，若鼠標在窗體內移動時，激活mouseMove函數，通過計算鼠標移動的距離來及時整個窗體的位置移動。

③當鼠標彈起(mouseup)時，調用mouseUp事件,將document上綁定的mousemove事件和mouseup事件解除綁定。

整個過程的原理就是：當鼠標mousedown時，鼠標的移動事件轉移到document上來，通過鼠標在document上的移動事件來對整個窗體進行處理。

另外，在mouseMove中有個小技巧，就是全局的left，top變量記錄上一次鼠標停止時的位置，然后下一次移動時鼠標的位置與left，top變量進行對比來確定鼠標移動了多少距離，來對整個模態子窗體做出相應的位置移動即可。

經過這一段代碼的分析，發現鼠標移動窗體乃至document上的任何元素都是相當easy的

比如，如果想要通過拖拽來改變窗體的大小，一樣我們只需要在mouseMove事件處理函數中調整窗體的大小就ok了，是不是又發現自己有多學會了一招，又精進了一小步呢？

有人會問setCapture和releaseCapture分別都是干什么的呢？其實這是為了兼容IE，僅有IE才有這倆函數，在此鄙視IE。setCapture可以讓當前元素捕獲鼠標的所有事件，如果不使用它們，可能不兼容IE瀏覽器哦。

學習了鼠標拖拽移動子窗體的JS實現介紹的知識后，相信大家都能在項目中獨立完成了，錯新技術頻道小編建議大家都要學起來哦。