社区首页 >专栏 >拖动图片改变位置

拖动图片改变位置

Dreamy.TZK

发布于 2020-04-16 09:06:25

6.8K10

代码可运行

文章被收录于专栏：小康的自留地小康的自留地

运行总次数：0

代码可运行

案例描述

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

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

实现过程

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

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

代码实现

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pic {
            width: 160px;
            height: 92px;
            border-radius: 10px;
            box-shadow: 0 0 5px 5px #e5e5e5;
            position: absolute;
            left: 200px;
            top: 200px
        }
    </style>
</head>

<body>
    <img class="pic" src="https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/d8ccc2fd66f340c46b8fb98ed7148223.png">
</body>

</html>

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

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

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

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

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

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

html.onmousemove = function (event) {
    if (flag === true) {  
        cloneImg.onclick = release
    }
}
function release() {
    flag = false
}

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

其他

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pic {
            width: 160px;
            height: 92px;
            border-radius: 10px;
            box-shadow: 0 0 5px 5px #e5e5e5;
            position: absolute;
            left: 200px;
            top: 200px
        }
    </style>
</head>

<body>
    <img class="pic"
        src="https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/d8ccc2fd66f340c46b8fb98ed7148223.png" alt="">
    <script>
        var img = document.getElementsByClassName('pic')[0]
        var cloneImg, flag = false
        img.onclick = function (event) {
            flag = true //表示click事件出发了
            // 获取鼠标坐标值html
            var mouseX = event.pageX
            var mouseY = event.pageY
            // 计算复制的图片的做编制
            var x = mouseX - 80
            var y = mouseY - 46
            // 获取原有图片当前显示的宽度和高度
            // 复制元素,并且显示（鼠标显示在图片的正中心）在页面中
            cloneImg = img.cloneNode()
            document.body.appendChild(cloneImg)
            cloneImg.style.left = x + 'px'
            cloneImg.style.top = y + 'px'
        }
        // 鼠标跟随移动 - 鼠标跟随事件
        var html = document || document.documentElement //代表当前页面
        html.onmousemove = function (event) {
            if (flag === true) {
                // 获取鼠标坐标值html
                var mouseX = event.pageX
                var mouseY = event.pageY
                // 计算复制的图片的做编制
                var x = mouseX - 80
                var y = mouseY - 46
                cloneImg.style.left = x + 'px'
                cloneImg.style.top = y + 'px'
                cloneImg.onclick = release
            }
        }
        // 释放图片
        function release() {
            flag = false
        }
    </script>
</body>

</html>