博客

1.带框拖拽

function dragWithBox(dom) {
    dom.onmousedown = function (e) {
        // 鼠标按下的时候，记录鼠标点击的位置相对于div块的坐标
        var evt = e || window.event;
        var l = evt.offsetX;
        var t = evt.offsetY;
        var toLeft = 0;
        var toTop = 0;
        // 当鼠标按下的时候，生成一个框，给基础样式
        // 位置和原来的dom重合，加定位
        var box = document.createElement('div');
        box.style.width = dom.offsetWidth + "px";
        box.style.height = dom.offsetHeight + "px";
        box.style.border = '2px dotted black';
        box.style.position = 'absolute';
        box.style.left = dom.offsetLeft + 'px';
        box.style.top = dom.offsetTop + 'px';
        document.body.appendChild(box);
        // 鼠标在页面上移动的时候，需要让div跟着鼠标走
        document.onmousemove = function (e) {
            var evt = e || window.event;
            // 有滚动条的时候要把滚动距离算在内
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            // div跟着走的时候，需要把鼠标按下时的那个相对坐标计算在内
            toLeft = evt.clientX + scrollLeft - l;
            toTop = evt.clientY + scrollTop - t;
            // window.innerWidth - div块本身的宽度，就是最大允许left
            var maxLeft = window.innerWidth + scrollLeft - dom.offsetWidth;
            if (toLeft < 0) {
                // 如果left值小于0，则置为0，防止div从左侧被拖出
                toLeft = 0;
            } else if (toLeft > maxLeft) {
                // 如果left值大于极限，则置为极限，防止div从右侧被拖出
                toLeft = maxLeft;
            }
            // window.innerHeight - div块本身的高度，就是最大允许top
            var maxTop = window.innerHeight + scrollTop - dom.offsetHeight;
            if (toTop < 0) {
                // 如果top值小于0，则置为0，防止div从左侧被拖出
                toTop = 0;
            } else if (toTop > maxTop) {
                // 如果top值大于极限，则置为极限，防止div从右侧被拖出
                toTop = maxTop;
            }
            // 设置一下框的位置
            box.style.left = toLeft + 'px';
            box.style.top = toTop + 'px';
        }
        document.onmouseup = function () {
            // 当鼠标抬起的时候，清除onmousemove事件，
            document.onmousemove = null;
            // 当抬起的时候也可以顺便把自己清除(可选);
            document.onmouseup = null;
            // 设置一下div块在页面中的位置, 跟到框被移动到的地方
            dom.style.left = toLeft + 'px';
            dom.style.top = toTop + 'px';
            // remove掉那个框
            document.body.removeChild(box);
        }
        // 屏蔽默认响应，解决可能的浏览器自身bug
        return false;
    }
}

2.不带框拖拽

function drag(dom) {
    dom.onmousedown = function (e) {
        // 鼠标按下的时候，记录鼠标点击的位置相对于div块的坐标
        var evt = e || window.event;
        var l = evt.offsetX;
        var t = evt.offsetY;
        // 鼠标在页面上移动的时候，需要让div跟着鼠标走
        document.onmousemove = function (e) {
            var evt = e || window.event;
            // 有滚动条的时候要把滚动距离算在内
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            // div跟着走的时候，需要把鼠标按下时的那个相对坐标计算在内
            var toLeft = evt.clientX + scrollLeft - l;
            var toTop = evt.clientY + scrollTop - t;
            // window.innerWidth - div块本身的宽度，就是最大允许left
            var maxLeft = window.innerWidth + scrollLeft - dom.offsetWidth;
            if (toLeft < 0) {
                // 如果left值小于0，则置为0，防止div从左侧被拖出
                toLeft = 0;
            } else if (toLeft > maxLeft) {
                // 如果left值大于极限，则置为极限，防止div从右侧被拖出
                toLeft = maxLeft;
            }
            // window.innerHeight - div块本身的高度，就是最大允许top
            var maxTop = window.innerHeight + scrollTop - dom.offsetHeight;
            if (toTop < 0) {
                // 如果top值小于0，则置为0，防止div从左侧被拖出
                toTop = 0;
            } else if (toTop > maxTop) {
                // 如果top值大于极限，则置为极限，防止div从右侧被拖出
                toTop = maxTop;
            }
            // 设置一下div块在页面中的位置
            dom.style.left = toLeft + 'px';
            dom.style.top = toTop + 'px';
        }
        document.onmouseup = function () {
            // 当鼠标抬起的时候，清除onmousemove事件，
            document.onmousemove = null;
            // 当抬起的时候也可以顺便把自己清除(可选);
            document.onmouseup = null;
        }
        // 屏蔽默认响应，解决可能的浏览器自身bug
        return false;
    }
}