弾戸をドラッグして、元のjsを実現します.

4429 ワード

javascript

直接運行して効果を見ることができて、肝心なところはすでに注釈して説明して、あなたに対してある程度助けがあることを望みます.


         
    
    
         じる
    



    //g()      dom  
    function g(id) {
        return document.getElementById(id);
    }

    //      
    g('dialog_btn').onclick = function () {
        g('mask').style.display = 'block';
        g('dialog').style.display = 'block';
        autoCenter(g('dialog'));
    }

    //      
    g('dialog_close').onclick = function () {
        g('mask').style.display = 'none';
        g('dialog').style.display = 'none';
    }
    
    //      
    function autoCenter(el) {
        //      
        var windowW = document.documentElement.clientWidth;
        var windowH = document.documentElement.clientHeight;

        //      
        var elW = el.offsetWidth;
        var elH = el.offsetHeight;

        el.style.left = (windowW-elW)/2 + 'px';
        el.style.top = (windowH-elH)/2 + 'px';
    }

    //        
    //document.attachEvent IE       ，       ，firefox、chrome  css -moz-user-select: none; -webkit-user-select: none;  
    if(document.attachEvent) {
        g('dialog').attachEvent('onselectstart', function () {
            return false;
        })
    }

    //      ，      
    window.onresize = function () {
        autoCenter(g('dialog'));
    }

    //      
    //1.     ，       ，        
    //2.     ，             
    //3.     ，        
    //4.        

    var mx = 0; //  x,y   (   left top)
    var my = 0;

    var dx = 0; //  x,y   
    var dy = 0;

    var isDraging = false; //       

    //    
    g('move_part').addEventListener('mousedown', function (e) {
        var e = e || window.event; //    ，window.event IE       
        mx = e.pageX; //     X  
        my = e.pageY; //     Y  
        dx = g('dialog').offsetLeft; //         
        dy = g('dialog').offsetTop; //         
        isDraging = true; //       
    })

    //    
    //                onmousemove  
    document.onmousemove = function (e) {
        var e = e || window.event;
        var x = e.pageX; //     X  
        var y = e.pageY; //     X  
        if(isDraging) {
            var moveX = x - mx + dx; //   +  left =     left 
            var moveY = y - my + dy; //     top 

            //        
            //    
            var pageW = document.documentElement.clientWidth;
            var pageH = document.documentElement.clientHeight;
            //    
            var dialogW = g('dialog').offsetWidth;
            var dialogH = g('dialog').offsetHeight;
            var maxX = pageW - dialogW; //x       
            var maxY = pageH - dialogH; //x       
            //Math.min()  Math.max()  
            moveX = Math.min(Math.max(0, moveX), maxX); //  left  , 0-maxX
            moveY = Math.min(Math.max(0, moveY), maxY); //  top  , 0-maxY
            //        
            g('dialog').style.left = moveX + 'px';
            g('dialog').style.top = moveY + 'px';
        }
    }

    //    
    g('move_part').addEventListener('mouseup', function () {
        isDraging = false;
    })

js常用文字列方法