实现图片拖拽效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45221036/article/details/108329909

实现拖拽

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<body style="margin: 0;">
    <img id='dv' src="https://picsum.photos/200/300" />
</body>
<script>
    //获取元素
    var dv = document.getElementById('dv');
    var x = 0, y = 0, l = 0, t = 0;
    var isDown = false;
    //鼠标按下事件
    dv.onmousedown = function (e) {
        //获取x坐标和y坐标
        x = e.clientX;
        y = e.clientY;

        //获取左部和顶部的偏移量
        l = dv.offsetLeft;
        t = dv.offsetTop;
        //开关打开
        isDown = true;
        //设置样式  
        dv.style.cursor = 'move';
    }
    //鼠标移动
    window.onmousemove = function (e) {
        e.preventDefault()
        if (isDown == false) {
            return;
        }
        //获取x和y
        var nx = e.clientX;
        var ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        var nl = nx - (x - l);
        var nt = ny - (y - t);

        dv.style.left = nl + 'px';
        dv.style.top = nt + 'px';
    }
    //鼠标抬起事件
    dv.onmouseup = function () {
        //开关关闭
        isDown = false;
        dv.style.cursor = 'default';
    }
</script>
</html>