滑鼠拖曳移動子窗體的JS實作_javascript技巧

1.子窗體

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

這一步驟很容易實現，只要div css就ok了，請看程式碼：

複製程式碼 程式碼如下:

   

​​

   

     點住著區塊區域可以改變我的位置
       

   

複製程式碼


程式碼如下:


.modal-background
{
     background-color: #999999; 999999;     left: 0;

    opacity: 0.3;
    position: fixed;
    right: 0;
 . >}

.modal-window
{
    background-color: #FFFFFF;
    border: 1px solid #6B94AD;
family : 'Microsoft YaHei';
    font-size: 12px;
    height: 120px;
    left: 50%;
 . 60px;
    opacity: 1;
    position: fixed;
    top: 50%;

    width: 320px;    .modal-window .head
    {
        height: 25px;
      height: 25px;
  
        background-image: -moz-linear-gradient (top, #4A8CC5, #2963A5); /* Firefox */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A), left top, left bottom, color-stop(0, #ApCC5(0),1855 , #2963A5)); /* Saf4 , Chrome */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endorstr='#2963AstartColorstr='#4A8CC5', endorstr='#2963AstartColorstr='#4A8CC5', endorstr='#2963A */
    }

        .modal-window .head center
        {
        🎜>

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

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

複製程式碼 程式碼如下:  div>

   

       

      🎜>       

   

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

複製程式碼

程式碼如下:.list-window{

    width:600pidth:600p;

    margin-left:-300px;
    margin-top:-200px;
}

如圖

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

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

複製程式碼 程式碼如下:

var left, this $this;


var left, this $this;
$this; (document).delegate('.modal-window .head', 'mousedown', function (e) {
    left = e.clientX, top = e.clientY, $this = $(this).css(' cursor', 'move');
    this.setCapture ? (
    this.setCapture(),
    this.onmousemove = 必須this.onmouseup = mouseUp
    ) : $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp);
});
function mouseMove(3); >    var target = $this.parents('.modal-window');
    var l = Math.max((e.clientX - left Number(target.css('margin-left').replace(/px $/, '')) || 0), -target.position().left);
    var t = Math.max((e.clientY - top Number(target.css('margin-top') .replace(/px$/, '')) || 0), -target.position().top);
    l = Math.min(l, $(window).width() - target.width () - target.position().left);
    t = Math.min(t, $(window).height() - target.height() - target.position().top);
left = e.clientX;
    top = e.clientY;
    target.css({ 'margin-left': l, 'margin-top': t });
}
function mouseUp (e) {
    var el = $this.css('cursor', 'default').get(0);
    el.releaseCapture ?
    (        el.onmousemove = el.onmouseup = null
    ) : $(document).unbind("mousemove", mouseMove).unbind("mouse 🎜>
這段程式碼非常簡短，能否在各種瀏覽器中很流暢的運作。

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

①當滑鼠在模態視窗頭部點下(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瀏覽器哦。