第一百三十五節，JavaScript，封裝庫--拖拽

JavaScript，封裝庫--拖拽

封裝庫新增1個拖拽方法

 

/** tuo_zhuai()方法，將一個彈窗元素實現拖拽功能
 * 注意：通常須要在css文件將元素裏的某一個區塊光標設置成提示能夠拖拽，如：cursor: move;
 * 無參
 **/
feng_zhuang_ku.prototype.tuo_zhuai = function () {
    if (this.jie_dian.length == 1) {
        var yan_su = null;
        for (var i = 0; i < this.jie_dian.length; i++) {
            yan_su = this.jie_dian[i];
        }
        yan_su.onmousedown = function (e) {
           // preDef(e);  //preDef()函數庫函數，阻止事件默認行爲,
            var e1 = getEvent(e);  //getEvent()函數庫函數，跨瀏覽器獲取事件對象,事件event對象,
            var diffx = e1.clientX - yan_su.offsetLeft;
            var diffy = e1.clientY - yan_su.offsetTop;
            if(typeof yan_su.setCapture != 'undefined'){
                yan_su.setCapture();
            }
            document.onmousemove = function (e) {
                var e2 = getEvent(e);
                var left = e2.clientX - diffx;
                var top = e2.clientY - diffy;
                if (left < 0){
                    left = 0;
                }else if(left > getInner().width - yan_su.offsetWidth){
                    left = getInner().width - yan_su.offsetWidth;
                }
                if (top < 0){
                    top = 0;
                }else if(top > getInner().height - yan_su.offsetHeight){
                    top = getInner().height - yan_su.offsetHeight;
                }
                yan_su.style.left = left + 'px';
                yan_su.style.top = top + 'px';
            };
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                if (typeof yan_su.releaseCapture != 'undefined') {
                    yan_su.releaseCapture();
                }
            };
        };
    } else {
        alert("將一個彈窗元素實現拖拽功能,只能設置一個彈窗元素，目前jie_dian數組裏是多個元素請檢查！")
    }
    return this;
};

 

HTML代碼

<div id="login">
    <h2><img src="img/close.png" alt="" class="close" />網站登陸</h2>
    <div class="user">賬 號：<input type="text" name="user" class="text" /></div>
    <div class="pass">密 碼：<input type="password" name="pass" class="text" /></div>
    <div class="button"><input type="button" class="submit" value="" /></div>
    <div class="other">註冊新用戶 | 忘記密碼？</div>
</div>

 

css代碼

 

/*登陸框*/
#login{
    width: 350px;
    height: 250px;
    border: 1px solid #ccc;
    position:absolute;
    display: none;
    z-index: 9999;
    background-color: #fff;
}
#login h2{
    background: rgba(0, 0, 0, 0) url("img/login_header.png") repeat-x scroll 0 0;
    border-bottom: 1px solid #ccc;
    color: #666;
    font-size: 14px;
    height: 40px;
    line-height : 40px;
    text-align: center;
    letter-spacing: 1px;
    margin: 0 0 20px;
    cursor: move;
}
#login h2 img{
    cursor: pointer;
    float: right;
    position: relative;
    right: 8px;
    top: 14px;
}
#login div.user, #login div.pass {
    color: #666;
    font-size: 14px;
    padding: 5px 0;
    text-align: center;
}
#login input.text {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    font-size: 14px;
    height: 25px;
    width: 200px;
}
#login .button {
    padding: 20px 0;
    text-align: center;
}
#login input.submit {
    background: rgba(0, 0, 0, 0) url("img/login_button.png") no-repeat scroll 0 0;
    border: medium none;
    cursor: pointer;
    height: 30px;
    width: 107px;
}
#login .other {
    color: #666;
    padding: 15px 10px;
    text-align: right;
}
/*遮罩鎖屏區塊*/
#suo_ping{
    z-index: 9998; /*注意：若是遮罩層上面有元素，它的層級要大於9998*/
    background: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    display: none;
}

 

前臺js代碼

//前臺調用代碼
window.onload = function (){
    //獲取到我的中心元素節點，執行鼠標移入移出方法
    $().huo_qu_class('ge_ren_zhong_xin','tou').shu_biao_yi_ru_yi_chu(function () {
        //當鼠標移入時，改變我的中心背景圖片
        $(this).css('background', 'url(img/arrow2.png) no-repeat right center');
        //當鼠標移入時，將ul元素執行顯示方法
        $().huo_qu_name('ul').xian_shi();
    }, function () {
        //當鼠標移出時，改變我的中心背景圖片
        $(this).css('background', 'url(img/arrow.png) no-repeat right center');
        //當鼠標移出時，將ul元素執行隱藏方法
        $().huo_qu_name('ul').yin_cang();
    });

    //彈出登陸框加遮罩鎖屏
    //獲取登陸框，執行將登陸框居中方法，執行瀏覽器窗口事件方法
    $().huo_qu_id('login').yuan_su_ju_zhong().chuang_kou_shi_jian(function () {
        //獲取登陸框，執行將登陸框居中方法
        $().huo_qu_id('login');
        //獲取遮罩鎖屏元素，執行遮罩鎖屏方法
        $().huo_qu_id('suo_ping').zhe_zhao_suo_ping();
    });
    //獲取登陸元素節點，執行點擊事件方法
    $().huo_qu_class('deng_lu').on_click(function () {
        //獲取登陸框，改變css
        $().huo_qu_id('login').xian_shi().yuan_su_ju_zhong();
        //獲取遮罩鎖屏元素，執行顯示方法，執行遮罩鎖屏方法
        $().huo_qu_id('suo_ping').xian_shi().zhe_zhao_suo_ping();
    });
    //獲取登陸框裏的關閉元素，執行點擊事件方法
    $().huo_qu_class('close').on_click(function () {
        //獲取登陸框，改變css
        $().huo_qu_id('login').yin_cang();
        //獲取遮罩鎖屏元素，執行隱藏方法
        $().huo_qu_id('suo_ping').yin_cang();
    });

    //拖拽
    $().huo_qu_id('login').tuo_zhuai();


};