js面向过程-拖拽

1.步骤分析：

1.1 获取id

1.2 当鼠标点击时执行的js

1.3当鼠标移动时执行的js

1.4当鼠标放开时执行的js

2.代码实现

<!DOCTYPE html>
<html lang="en">
<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>
        #div1 {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-image: url('1.png');
        }
    </style>

    <script>
        window.onload = function() {
            // 获取div
            var oDiv = document.getElementById('div1');
            // 当鼠标点击时执行的js
            oDiv.onmousedown = function() {
                // 拖拽对象的大小(dis) = 鼠标的坐标(event.client) - div的坐标(oDiv.offset)
                var disX = event.clientX - oDiv.offsetLeft;
                var disY = event.clientY - oDiv.offsetTop;
                // 当鼠标移动时执行的js
                document.onmousemove = function() {
                    // 拖拽对象的坐标 = 鼠标的坐标(event.client) - 拖拽对象的大小(dis)
                    oDiv.style.left = event.clientX - disX + 'px';
                    oDiv.style.top = event.clientY - disY + 'px';
                };
                // 当鼠标放开时执行的js
                document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            };
        };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

3.核心代码

3.1 拖拽对象的大小(dis) = 鼠标的坐标(event.client) - div的坐标(oDiv.offset)

var disX = event.clientX - oDiv.offsetLeft;
var disY = event.clientY - oDiv.offsetTop;

3.2拖拽对象的坐标 = 鼠标的坐标(event.client) - 拖拽对象的大小(dis)

oDiv.style.left = event.clientX - disX + 'px';
oDiv.style.top = event.clientY - disY + 'px';

1.步骤分析：

2.代码实现

3.核心代码

猜你喜欢