鼠标拖拽是计算机软件中常见的一种操作方式，无论是拖拽文件到回收站又或是拖拽窗口，都给我们的使用带来了很多便捷和乐趣。虽然在网站中拖拽功能并不常见，但在一些地方加入拖拽功能也能带来意想不到的好处。这里就用 JavaScript 实现元素拖拽。

代码

HTML和CSS代码：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖拽</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: #FF5080;
            position: absolute;
            cursor: move;
        }
    </style>
</head>
<body>
    <div></div>
    <script type="text/javascript" src="拖拽.js"></script>
</body>
</html>

要实现拖拽功能需要给被拖拽的元素设置定位，把被拖拽元素的 cursor 属性设置为 move 可提醒用户此元素是可以拖动的。

JS代码：

var Div = document.querySelector('div');  //  获取div元素

//  div鼠标按下
Div.onmousedown = function(ev) {
    var ev = ev || event;  //  获取Event 对象
    var X = ev.clientX - this.offsetLeft;  //  鼠标位置的X轴 - div的left
    var Y = ev.clientY - this.offsetTop;  //  鼠标位置的Y轴 - div的top

    //  文档鼠标移动
    document.onmousemove = function(ev) {
        var ev = ev || event;  //  获取Event 对象
        Div.style.left = ev.clientX - X + 'px';  //  设置div的left
        Div.style.top = ev.clientY - Y + 'px';  //  设置div的top
    }

    //  文档鼠标按键被松开
    document.onmouseup = function() {
        document.onmousemove = null;  //  清空文档的移动事件
    }
    return false;  //  阻止一些浏览器的默认事件
}

说明

div 鼠标被按下后 X 变量会保存鼠标当前位置 - div 的 left，Y 变量会保存鼠标当前位置 - div 的 top。这里给 document 加移动事件是为了防止因鼠标移动过快而导致鼠标移出div，当鼠标按下并且移动的时候设置 div 的left为鼠标当前位置 - X 变量的值，top 也是同理，当鼠标放开后清空 document 的移动事件可停止移动。这里只是写了简单的拖拽，并没有限制 div 的可拖动范围。