通过js任意拖动html元素

最新推荐文章于 2022-11-17 20:29:30 发布

品风 ₯ 未醉

最新推荐文章于 2022-11-17 20:29:30 发布

阅读量1.5k

点赞数 2

分类专栏： js+html+css的小练习文章标签： 1024程序员节 javascript 前端 html css3

本文链接：https://blog.csdn.net/weixin_48342617/article/details/120942938

版权

js+html+css的小练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细讲解了如何使用JavaScript和HTML实现网页中元素的拖拽功能，涉及onmousemove、onmousedown和onmouseup三个关键事件，以及如何通过事件对象获取和操作元素位置。

摘要由CSDN通过智能技术生成

视频效果：

通过js实现在网页中任意拖拽html元素的功能

js及html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜刀</title>
    <link rel="stylesheet" href="./样式/css.css">
    <script>
        window.onload=function(){  
        // 获取cd对象
        let cd=document.querySelector(".cd");
        // 设置cd按下时的事件
        cd.onmousedown=function(event){
            // 完善鼠标的点击位置，使我们的鼠标点击图片哪，鼠标就停留在哪
            // 实际上就是解决top 和 left的问题
            let ol=event.clientX-cd.offsetLeft;
            let ot=event.clientY-cd.offsetTop;
         //  为document.onmouseover上绑定事件
        document.onmousemove=function(event){
         // 获取鼠标的坐标
            let left=event.clientX;
            let top=event.clientY;
        //  将菜刀的横坐标设置为left,纵坐标设置为top从而实现图片移动的效果
        cd.style.left=left-ol+"px";
        cd.style.top=top-ot+"px";
        } 
        }
        // 为什么要将释放事件绑定给document,因为如果绑定给cd，cd被其他元素挡住时,事件会失效
        document.onmouseup=function(){
            document.onmousemove="null";
         }
        }
    </script>
</head>
<body>
    <div class="cd">
           
     </div>
</body>
</html>

涉及的知识点

3个事件：
onmousemove 鼠标移动时触发事件
onmousedowm 鼠标按下时触发事件
onmouseup 鼠标松开时触发事件
事件对象
我们为每个事件绑定对象时，浏览器都会传入一个对象作为参数，这个就是事件对象，我们可以通过事件对象，或去事件发生时的一些信息
例如：可以获取对象发生是的坐标：clientX clientY