滑鼠拖拽移動子表單的JS實現

滑鼠拖拽移動子表單的JS實現

 這篇文章主要介紹了滑鼠拖拽移動子表單的JS實現,需要的朋友可以參考下

1.子表單

 

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

 

 

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

 

 代碼如下:

    <div class="modal-background"></div>

    <div class="modal-window">

        <div class="head">

            <center>點住著塊地區可以改變我的位置</center>

        </div>

    </div>

 代碼如下:

.modal-background

{

    background-color: #999999;

    bottom: 0;

    left: 0;

    opacity: 0.3;

    position: fixed;

    right: 0;

    top: 0;

    z-index: 1100;

}

 

.modal-window

{

    background-color: #FFFFFF;

    border: 1px solid #6B94AD;

    box-shadow: 5px 5px 5px #6B94AD;

    font-family: 'Microsoft YaHei';

    font-size: 12px;

    height: 120px;

    left: 50%;

    margin-left: -160px;

    margin-top: -160px;

    opacity: 1;

    position: fixed;

    top: 50%;

    width: 320px;

    z-index: 1110;

}

 

    .modal-window .head

    {

        height: 25px;

        color: #fff;

        font-weight: 600;

        background-image: -moz-linear-gradient(top, #4A8CC5, #2963A5); /* Firefox */

        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A8CC5), color-stop(1, #2963A5)); /* Saf4+, Chrome */

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endColorstr='#2963A5', GradientType='0'); /* IE*/

    }

 

        .modal-window .head center

        {

            padding-top: 2px;

        }

 

 

 

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

 

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

 

代碼如下:

    <div class="modal-background"></div>

    <div class="modal-window list-window">

        <div class="head">

            <center>點住著塊地區可以改變我的位置</center>

        </div>

    </div>

 

 

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

 

 代碼如下:

.list-window

{

    width:600px;

    height:400px;

    margin-left:-300px;

    margin-top:-200px;

}

 

 

 

 

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

 

 

2.當滑鼠點住子表單的頭部時，如何?子表單的拖拽移動呢？當引入jQ後，我們只需要很少的指令碼就搞定這個小功能。不信我們看

 

代碼如下:

var left, top, $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 = function (ev) { mouseMove(ev || event); },

    this.onmouseup = mouseUp

    ) : $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp);

});

function mouseMove(e) {

    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.releaseCapture(),

        el.onmousemove = el.onmouseup = null

    ) : $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp);

}

 

 

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

 

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

 

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