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代码

     
    
      
网站登录
    
      
       帐 号：
       
      
    
      
       密 码：
       
      
    
      
       
      
    
      
       注册新用户 | 忘记密码？
      
     

 

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