拖动图片改变位置

案例描述

点击图片可以复制图片
鼠标移动过程中，会有图片跟随
再次点击图片，图片固定位置。

在线展示：https://gethtml.cn/project/2020/04/14/index.html

实现过程

通过过程我们可以分析出，需要三个事件进行绑定即

点击事件
点击后创建（复制）一个新的图片
鼠标跟随
图片跟随鼠标移动而移动
停止
即鼠标再次点击图片固定在当前位置。

代码实现

首先式html结构，这个非常简单，无非是一张图片在变动下位置即可。


x
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
    <style>
9
        .pic {
10
            width: 160px;
11
            height: 92px;
12
            border-radius: 10px;
13
            box-shadow: 0 0 5px 5px #e5e5e5;
14
            position: absolute;
15
            left: 200px;
16
            top: 200px
17
        }
18
    </style>
19
</head>
20
21
<body>
22
    <img class="pic" src="https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/d8ccc2fd66f340c46b8fb98ed7148223.png">
23
</body>
24
25
</html>

第二步编写我们的鼠标点击事件。

鼠标点击之前，首先要获取图片对象，不然怎么给图片绑定点击事件呢。这里需要考虑一件事情，即鼠标移动事件在什么时候被触发，很简单，当然是在图片被点击的时候。那么我们就需要一个标志，用于记录是否触发了点击事件。因此第一个事件的代码可以写为：


x
1
//获取图片元素对象
2
var img = document.getElementsByClassName('pic')[0]
3
//设置开关，并定义克隆的对象。
4
var cloneImg, flag = false
5
// 为图片对象绑定事件
6
img.onclick = function (event) {
7
    flag = true //表示click事件出发了
8
    // 获取鼠标坐标值html
9
    var mouseX = event.pageX
10
    var mouseY = event.pageY
11
    // 计算复制的图片的坐标值（鼠标减去图片大小的一半）
12
    var x = mouseX - 80 
13
    var y = mouseY - 46
14
    // 获取原有图片当前显示的宽度和高度
15
    // 复制元素,并且显示（鼠标显示在图片的正中心）在页面中
16
    cloneImg = img.cloneNode()
17
    document.body.appendChild(cloneImg)
18
    //改变克隆对象的坐标
19
    cloneImg.style.left = x + 'px'
20
    cloneImg.style.top = y + 'px'
21
}

那么接下来要做的就是就是为新创建出来的图片对象赋予鼠标移动事件。这里我们需要判断下标志是否为true，即点击事件是否被触发。同样需要考虑


xxxxxxxxxx
1
// 鼠标跟随移动 - 鼠标跟随事件
2
var html = document || document.documentElement //代表当前页面
3
html.onmousemove = function (event) {
4
    if (flag === true) {
5
        // 获取鼠标坐标值html
6
        var mouseX = event.pageX
7
        var mouseY = event.pageY
8
        // 计算复制的图片的做编制
9
        var x = mouseX - 80
10
        var y = mouseY - 46
11
        cloneImg.style.left = x + 'px'
12
        cloneImg.style.top = y + 'px'
13
    }
14
}

那么最后一件事就是鼠标再次点击的情况了，这个情况是在鼠标移动事件时才可以被执行的，那么这个事件就应该写在鼠标移动事件里


xxxxxxxxxx
1
html.onmousemove = function (event) {
2
    if (flag === true) {  
3
        cloneImg.onclick = release
4
    }
5
}
6
function release() {
7
    flag = false
8
}

此时我们的小项目也就完成了

其他

完整代码


64
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
    <style>
9
        .pic {
10
            width: 160px;
11
            height: 92px;
12
            border-radius: 10px;
13
            box-shadow: 0 0 5px 5px #e5e5e5;
14
            position: absolute;
15
            left: 200px;
16
            top: 200px
17
        }
18
    </style>
19
</head>
20
21
<body>
22
    <img class="pic"
23
        src="https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/d8ccc2fd66f340c46b8fb98ed7148223.png" alt="">
24
    <script>
25
        var img = document.getElementsByClassName('pic')[0]
26
        var cloneImg, flag = false
27
        img.onclick = function (event) {
28
            flag = true //表示click事件出发了
29
            // 获取鼠标坐标值html
30
            var mouseX = event.pageX
31
            var mouseY = event.pageY
32
            // 计算复制的图片的做编制
33
            var x = mouseX - 80
34
            var y = mouseY - 46
35
            // 获取原有图片当前显示的宽度和高度
36
            // 复制元素,并且显示（鼠标显示在图片的正中心）在页面中
37
            cloneImg = img.cloneNode()
38
            document.body.appendChild(cloneImg)
39
            cloneImg.style.left = x + 'px'
40
            cloneImg.style.top = y + 'px'
41
        }
42
        // 鼠标跟随移动 - 鼠标跟随事件
43
        var html = document || document.documentElement //代表当前页面
44
        html.onmousemove = function (event) {
45
            if (flag === true) {
46
                // 获取鼠标坐标值html
47
                var mouseX = event.pageX
48
                var mouseY = event.pageY
49
                // 计算复制的图片的做编制
50
                var x = mouseX - 80
51
                var y = mouseY - 46
52
                cloneImg.style.left = x + 'px'
53
                cloneImg.style.top = y + 'px'
54
                cloneImg.onclick = release
55
            }
56
        }
57
        // 释放图片
58
        function release() {
59
            flag = false
60
        }
61
    </script>
62
</body>
63
64
</html>