【无标题】实现鼠标在网页中的拖拽效果

2501_91209193

于 2025-04-24 09:25:15 发布

阅读量191

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/2501_91209193/article/details/147469184

版权

页面效果:

代码实现：

<!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>
        #box{
            width:100px;
            height:100px;
            background-color:red ;
            position:absolute;
        }
    </style>
</head>
<body>
 <div id="box">
    <img src ="./images/微信图片_20250424084750_22.jpg" width:"100"height:"100">
 </div>
 <script>
    let box = document.querySelector("#box")
    box.onmousedown = function(e){
        let ox = e.offsetX
        let oy = e.offsetY
        document.onmousemove = function(e2){
            let cx = e2.clientX
            let cy = e2.clientY
            let dx = cx-ox
            let dy = cy-oy
            box.style.left = dx+"px"
             box.style.top = dy+"px"
        }
    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }
 </script>   
</body>
</html>

、