简单拖拽加边界处理加轨迹返回

需要事件： onmousedown onmousemove onmouseup

拖拽思路：

鼠标按下 onmousedown ：记录鼠标按下时的内部偏移量

var disx = e.offsetX;

var disy = e.offsetY;

鼠标移动 onmousemove ：设置被拖拽元素的left 和 top值

left = e.pageX - disx;

top = e.pageY - disy;

鼠标抬起 onmouseup ：取消移动事件

对象.onmousemove = null

获取window窗口的宽度： window.innerWidth 高度： window.innerHeight

取消拖拽时的文字选中状态 window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>完美拖拽</title>
    <style type="text/css">
        html,
        body {
            overflow: hidden;
        }

        body,
        div,
        h2,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            color: #fff;
            background: #000;
            font: 12px/2 Arial;
        }

        p {
            padding: 0 10px;
            margin-top: 10px;
        }

        span {
            color: #ff0;
            padding-left: 5px;
        }

        #box {
            position: absolute;
             300px;
            height: 150px;
            background: #333;
            border: 2px solid #ccc;
            top: 50%;
            left: 50%;
            margin: -75px 0 0 -150px;
        }

        #box h2 {
            height: 25px;
            cursor: move;
            background: #222;
            border-bottom: 2px solid #ccc;
            text-align: right;
            padding: 0 10px;
        }

        #box h2 a {
            color: #fff;
            font: 12px/25px Arial;
            text-decoration: none;
            outline: none;
        }
    </style>
    <script type="text/javascript">


    </script>
</head>

<body>
    <div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
        <h2><a href="javascript:;" id="a1">点击回放拖动轨迹</a></h2>
        <p><strong>Drag:</strong><span>false</span></p>
        <p><strong>offsetTop:</strong><span>231</span></p>
        <p><strong>offsetLeft:</strong><span>533</span></p>
    </div>
</body>

</html>
<script>
    var oBox = document.getElementById("box");
    var oA1 = document.getElementById("a1");
    var arr = [];
    oBox.onmousedown = function (e) {
        var e = e || event;
        //记录内部偏移量
        var disx = e.offsetX;
        var disy = e.offsetY;
        //移动
        oBox.onmousemove = function (e) {
            var e = e || event;
            var x = e.pageX - disx;
            var y = e.pageY - disy;
            var maxL = window.innerWidth - 300;
            var maxT = window.innerHeight - 150;

            // 边界处理
            if (x < 0) {
                x = 0;
            } else if (x > maxL) {
                x = maxL;
            }
            if (y < 0) {
                y = 0;
            } else if (y > maxT) {
                y = maxT;
            }
            //设置div的left和top值
            oBox.style.left = x + "px";
            oBox.style.top = y + "px";
            var aObj = {
                aleft: x,
                atop: y
            }
            arr.unshift(aObj);
        }
        document.onmouseup = function () {
            oBox.onmousemove = null;
            oA1.onclick = function () {
                var num = 0;
                var timer = null;

                timer = setInterval(function () {
                    oBox.style.left = arr[num].aleft + "px";
                    oBox.style.top = arr[num].atop + "px";
                    num++;
                    if (num == arr.length) {
                        clearInterval(timer);
                        arr = [];
                        return;
                    }
                }, 50)

            }
        }
        return false;
    }
</script>