鼠标拖拽是一种常见的js效果，下面贴一下原生js的实现方法。

注：第一段段js代码来自网络，第二段是在第一段基础上改进实现的。由于时间太久找不到出处，侵删。

先贴上一张对象和窗口之间距离的示意图方便理解，下文中也有注释。

HTML代码

1
<div id="move"></div>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html,body {
    height: 100%;
}

body {
    position: relative;
    overflow: hidden;
    margin: 0;
}

#move {
    width: 200px;
    height: 100px;
    background-color: #ddd;
    border: 1px solid #000;
    position: absolute;
    z-index: 1;
}

Javascript代码

可以将元素拖拽出窗口外

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
// clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
// offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
// offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
// screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
// screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
// x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
// y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。
window.onload = function() {
    var box = document.getElementById("move");
    move.onmousedown = function(e) {
        var e = e || event;
        console.log(e);
        var target = e.target || e.srcElement;
        var disX = e.clientX - target.offsetLeft;
        var disY = e.clientY - target.offsetTop;
        document.onmousemove = function(e) {
            target.style.left = e.clientX - disX + "px";
            target.style.top = e.clientY - disY + "px";
        }
        document.onmouseup = function(e) {
            document.onmousemove = null;
            document.onmousedown = null;
        }
    }
}

无法将元素拖拽出窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
window.onload = function() {
    var box = document.getElementById("move");
    move.onmousedown = function(e) {
        var e = e || event;
        var target = e.target || e.srcElement;
        var disX = e.clientX - target.offsetLeft;
        var disY = e.clientY - target.offsetTop;
        document.onmousemove = function(e) {
            target.style.left = e.clientX - disX + "px";
            target.style.top = e.clientY - disY + "px";
            if (target.offsetLeft + target.offsetWidth >= document.body.clientWidth) {
                target.style.left = document.body.clientWidth - target.offsetWidth + "px";
            }
            if (target.offsetLeft < 0) {
                target.style.left = 0 + "px";
            }
            if (target.offsetTop + target.offsetHeight >= document.body.clientHeight) {
                target.style.top = document.body.clientHeight - target.offsetHeight + "px";
            }
            if (target.offsetTop < 0) {
                target.style.top = 0 + "px";
            }
        };
        document.onmouseup = function(e) {
            document.onmousemove = null;
            document.onmousedown = null;
        }
    }
}