鼠標(biāo)拖拽移動子窗體的JS實(shí)現(xiàn)

更新時(shí)間：2014年02月25日 14:49:11 作者：

這篇文章主要介紹了鼠標(biāo)拖拽移動子窗體的JS實(shí)現(xiàn),需要的朋友可以參考下

1.子窗體

在設(shè)計(jì)網(wǎng)站的時(shí)候，我們需要設(shè)計(jì)一些模態(tài)的子窗體，比如

這一步很容易實(shí)現(xiàn)，只需要div+css就ok了，請看代碼：

復(fù)制代碼代碼如下:

    <div class="modal-background"></div>
    <div class="modal-window">
        <div class="head">
            <center>點(diǎn)住著塊區(qū)域可以改變我的位置</center>
        </div>
    </div>

復(fù)制代碼代碼如下:

.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就可以很容易實(shí)現(xiàn)上述模態(tài)窗體的效果。其中l(wèi)eft: 50%;top: 50%; margin-left: -160px; margin-top: -160px;是為了實(shí)現(xiàn)這個模態(tài)窗體的居中效果。

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

復(fù)制代碼代碼如下:

    <div class="modal-background"></div>
    <div class="modal-window list-window">
        <div class="head">
            <center>點(diǎn)住著塊區(qū)域可以改變我的位置</center>
        </div>
    </div>

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

復(fù)制代碼代碼如下:

.list-window
{
    width:600px;
    height:400px;
    margin-left:-300px;
    margin-top:-200px;
}

如圖

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

2.當(dāng)鼠標(biāo)點(diǎn)住子窗體的頭部時(shí)，如何實(shí)現(xiàn)子窗體的拖拽移動呢？當(dāng)引入jQ后，我們只需要很少的腳本就搞定這個小功能。不信我們看

復(fù)制代碼代碼如下:

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);
}

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

其實(shí)它的實(shí)現(xiàn)原理非常簡單，大致分為三步：

①當(dāng)鼠標(biāo)在模態(tài)窗體頭部點(diǎn)下(mousedown)時(shí)，立即給document綁定mousemove和mouseup事件

②當(dāng)鼠標(biāo)沒有彈起時(shí)(沒有mouseup)時(shí)，若鼠標(biāo)在窗體內(nèi)移動時(shí)，激活mouseMove函數(shù)，通過計(jì)算鼠標(biāo)移動的距離來及時(shí)整個窗體的位置移動。

③當(dāng)鼠標(biāo)彈起(mouseup)時(shí)，調(diào)用mouseUp事件,將document上綁定的mousemove事件和mouseup事件解除綁定。

整個過程的原理就是：當(dāng)鼠標(biāo)mousedown時(shí)，鼠標(biāo)的移動事件轉(zhuǎn)移到document上來，通過鼠標(biāo)在document上的移動事件來對整個窗體進(jìn)行處理。

另外，在mouseMove中有個小技巧，就是全局的left，top變量記錄上一次鼠標(biāo)停止時(shí)的位置，然后下一次移動時(shí)鼠標(biāo)的位置與left，top變量進(jìn)行對比來確定鼠標(biāo)移動了多少距離，來對整個模態(tài)子窗體做出相應(yīng)的位置移動即可。

經(jīng)過這一段代碼的分析，發(fā)現(xiàn)鼠標(biāo)移動窗體乃至document上的任何元素都是相當(dāng)easy的

比如，如果想要通過拖拽來改變窗體的大小，一樣我們只需要在mouseMove事件處理函數(shù)中調(diào)整窗體的大小就ok了，是不是又發(fā)現(xiàn)自己有多學(xué)會了一招，又精進(jìn)了一小步呢？

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

您可能感興趣的文章: