JavaScript+HTML+css 拖拽框

JavaScript-code：

;(function(){
    function Drag(opt){
        this.dragEle = document.getElementsByClassName(opt.dragEle)[0];
        this.dragBox = document.getElementsByClassName(opt.dragBox)[0];
        this.x = 0;
        this.y = 0;
        _self = this;
        this.addEvent(this.dragEle,'mousedown',_self.mouseDown);
    };

    Drag.prototype = {
        mouseDown:function(e){
            var e = e || window.event,
                styles = _self.getStyles(_self.dragBox),
                pagePos = _self.pagePos(e);
                _self.x = pagePos.x - parseInt(styles.left);
                _self.y = pagePos.y - parseInt(styles.top);
                _self.addEvent(document,'mousemove',_self.mouseMove);
                _self.addEvent(document,'mouseup',_self.mouseUp);
        },
        mouseMove:function(e){
            var e = e || window.event,
                styles = _self.getStyles(_self.dragBox),
                pagePos = _self.pagePos(e),
                viewWidth = _self.getViewPort().width,
                viewHeight = _self.getViewPort().height,
                sMaxLeft = viewWidth - parseInt(styles.width),
                sMaxTop = viewHeight - parseInt(styles.height);
            
            _self.dragBox.style.left = _self.pagePos(e).x -  _self.x + 'px';
            _self.dragBox.style.top = _self.pagePos(e).y - _self.y + 'px';

            if(parseInt(styles.left) <= 0){
                _self.dragBox.style.left = 1+'px';
            }

            if(parseInt(styles.top) <= 0){
                _self.dragBox.style.top = 1+'px';
            }

            if(parseInt(styles.left) >= sMaxLeft){
                _self.dragBox.style.left = sMaxLeft-1+'px';
            }

            if(parseInt(styles.top) >= sMaxTop){
                _self.dragBox.style.top = sMaxTop-1+'px';
            }
            

        },
        mouseUp:function(e){
            var e = e || window.event;
            _self.removeEvenet(document,'mousemove',_self.mouseMove);
            _self.removeEvenet(this.dragEle,'mouseup',_self.mouseUp);
        },
        addEvent:function(ele,type,fn){
            if(typeof(ele.addEventListener) === 'function'){
                ele.addEventListener(type,fn,false);
            }else if(ele.attachEvent){
                ele.attachEvent('on' + type,fn);
            }else{
                ele['on'+type] = fn;
            }
        },
        removeEvenet:function(ele,type,fn){
            if(typeof(ele.addEventListener) === 'function'){
                ele.removeEventListener(type,fn,false);
            }else if(ele.detachEvent){
                ele.detachEvent('on' + type,fn);
            }else{
                ele['on'+type] = null;
            }
        },
        pagePos:function(e){
            var sLeft = _self.getScrollOffset().left,
                sTop = _self.getScrollOffset().top,
                cTop = document.documentElement.clientTop,
                cLeft = document.documentElement.clientLeft;
            return {
                x : e.clientX + sLeft - cLeft,
                y : e.clientY + sTop - cTop
            }
        },
        getStyles:function(ele,prop){
            if(window.getComputedStyle){
                if(prop){
                    return parseInt(window.getComputedStyle(ele,null)[prop])? parseInt(window.getComputedStyle(ele,null)[prop]):0;
                }else{
                    return window.getComputedStyle(ele,null);
                }
            }else{
                if(prop){
                    return parseInt(document.currentStyle[prop])?document.currentStyle[prop]:0;
                }else{
                    return document.currentStyle;
                }
            }
        },
        getScrollOffset:function(){
            if(window.pageXOffset){
                return {
                    'left':window.pageXOffset,
                    'top':window.pageYOffset
                }
            }else{
                return {
                    'left':document.documentElement.scrollLeft + document.body.scrollLeft,
                    'top':document.documentElement.scrollTop + document.body.scrollTop
                }
            }
        },
        getViewPort:function(){
            if(window.innerWidth){
                return {
                    width:window.innerWidth,
                    height:window.innerHeight
                }
            }else{
                if(document.compatMode === 'BackCompat'){
                    return{
                        width:document.body.clientWidth,
                        height:document.body.clientHeight
                    }
                }else{
                    return{
                        width:document.documentElement.clientWidth,
                        height:document.documentElement.clientHeight
                    }
                }
            }
        }
    };
    window.Drag = Drag;
}())

 

HTML-code：

<body>
    <div class="wrapper">
        <div class="box">
            <div class="box-hd">
                <h3>消息框</h3>
            </div>
            <div class="box-content">
                <ul class="box-list"></ul>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src='plugins/drag/js/drag.js'></script>
    <script type="text/javascript">
        var drag = new Drag({
            'dragEle':'box-hd',
            'dragBox':'box'
        });
    </script>
</body>

CSS-code：

common.css:----------------

body{
    margin: 0;
    padding: 0;
}

ul{
    padding: 0px;
    margin: 0px;
}

li{
    padding: 0px;
    margin: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6{
    padding: 0px;
    margin: 0px;
}

drag.css------------------

.wrapper{
    position: absolute;
    bottom: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url('../img/body-bg.jpg');
    background-repeat:no-repeat;
    background-size:100% 100%;
}

.box{
    position: absolute;
    top: 20%;
    left: 35%;
    width: 400px;
    height: auto;
    border-radius: 10px;
}

.box-hd{
    width: 100%;
    height: 50px;
    background-color: #00BFFF;
    cursor: move;
}

.box-hd h3{
    color: #FFFFFF;
    text-align: center;
    line-height: 50px;
}

.box-content{
    width: 100%;
    height: 300px;
    background-color: #ffffff;
}