鼠标拖拽功能实现-优快云博客

怎么获取一个元素的宽高：
window.getComputedStyle(obj, null); // 非IE
obj.currentStyle; // IE

标准盒模型和IE盒模型的相互转化
box-sizing：border-box（IE盒模型），content-box（标准盒模型）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS拖拽</title>
    <style>
        *{padding: 0; margin: 0; }
        .box{width: 100px;height: 100px;background: blue;position: absolute; }
    </style>
    <script>
        var isDown = false;
        var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;
        window.onload = function() {
            obj = document.getElementById('box');
            obj.onmousedown = down;
            document.onmousemove = move;
            document.onmouseup = up;
        }

        function down(event) {
            obj.style.cursor = "move";
            isDown = true;
            ObjLeft = obj.offsetLeft;
            ObjTop = obj.offsetTop;
            posX = parseInt(mousePosition(event).x);
            posY = parseInt(mousePosition(event).y);
            offsetX=posX-ObjLeft;
            offsetY=posY-ObjTop;
        }

        function move(event) {
            if (isDown == true) {
                var x=mousePosition(event).x-offsetX
                var y=mousePosition(event).y-offsetY
                var w = document.documentElement.clientWidth - obj.offsetWidth;
                var h = document.documentElement.clientHeight - obj.offsetHeight;
                console.log(x + ',' + y);
                x=Math.min(w,Math.max(0,x));
                y=Math.min(h,Math.max(0,y));
                obj.style.left = x + 'px';
                obj.style.top = y + 'px';
            }
        }

        function up() {
            isDown = false;
        }

        function mousePosition(evt) {
            var xPos, yPos;
            evt = evt || window.event;
            if (evt.pageX) {
                xPos = evt.pageX;
                yPos = evt.pageY;
            } else {
                xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
                yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
            }
            return {
                x: xPos,
                y: yPos
            }
        }
    </script>
</head>
<body>
<div id="box" class="box"></div>
</body>
</html>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖拽效果</title>
    <style type="text/css">
        #box{
            position:absolute;
            left:100px;
            top:100px;
            padding:5px;
            background:#f0f3f9;
            font-size:12px;
            -moz-box-shadow:2px 2px 4px #666666;
            -webkit-box-shadow:2px 2px 4px #666666;
        }
        #main{
            border:1px solid #a0b3d6;
            background:white;
        }
        #bar{
            line-height:24px;
            background:#beceeb;
            border-bottom:1px solid #a0b3d6;
            padding-left:5px;
            cursor:move;
        }
        #content{
            width:420px;
            height:250px;
            padding:10px 5px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="main">
        <div id="bar">拖拽</div>
        <div id="content">
            内容……
        </div>
    </div>
</div>
<script>
    var params = {
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false
    };
    var getCss = function(o,key){
        return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
    };
    var startDrag = function(bar, target, callback){
        if(getCss(target, "left") !== "auto"){
            params.left = getCss(target, "left");
        }
        if(getCss(target, "top") !== "auto") {
            params.top = getCss(target, "top");
        }
        bar.onmousedown = function(event){
            params.flag = true;
            if(!event){
                event = window.event;
                bar.onselectstart = function(){
                    return false;
                }
            }
            var e = event;
            params.currentX = e.clientX;
            params.currentY = e.clientY;
        };
        document.onmouseup = function(){
            params.flag = false;
            if(getCss(target, "left") !== "auto"){
                params.left = getCss(target, "left");
            }
            if(getCss(target, "top") !== "auto"){
                params.top = getCss(target, "top");
            }
        };
        document.onmousemove = function(event){
            var e = event ? event: window.event;
            if(params.flag){
                var nowX = e.clientX, nowY = e.clientY;
                var disX = nowX - params.currentX, disY = nowY - params.currentY;
                target.style.left = parseInt(params.left) + disX + "px";
                target.style.top = parseInt(params.top) + disY + "px";
            }
            if (typeof callback == "function") {
                callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
            }
        }
    };
    var oBox=document.getElementById("box");
    var oBar=document.getElementById("bar");
    startDrag(oBar,oBox);
</script>
</body>
</html>