运用js实现图层拖拽的功能

最新推荐文章于 2022-04-26 20:59:14 发布

城南花开ze

最新推荐文章于 2022-04-26 20:59:14 发布

阅读量1.1k

点赞数 2

分类专栏： Javascript 文章标签： javascript js实现图层拖拽

本文链接：https://blog.csdn.net/weixin_42614080/article/details/90320306

版权

Javascript 专栏收录该内容

111 篇文章 17 订阅

订阅专栏

1.需求分析：设计一个元素，可以跟随鼠标的移动，元素也进行移动，并且能够在鼠标按上与按下元素的时候，元素同样可以进行改变样式颜色。
2. 设计思路：先是需要获取元素，给元素绑定鼠标按下的事件，在绑定的事件中，兼容event事件，获取鼠标的坐标和元素的坐标，通过鼠标的坐标减去元素的坐标就可以得到鼠标在元素中的坐标。在绑定事件中，写上一个元素的移动事件，获取元素的移动坐标。最后，在鼠标按上的事件函数中，可以调用元素的移动事件就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图层拖拽</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 2px solid #ccc;
            cursor: pointer;
            position: absolute;
            top: 20px;
            left: 100px;
        }
    </style>
</head>
<body>

<div class="box" id="box"></div>

</body>
<script>

      var box = document.getElementById("box");
      box.onmousedown = function(env){

         // 兼容event事件
         var env = env || window.event;

         // 获取鼠标的坐标
         var x = env.clientX;
         var y = env.clientY;

        //  获取元素的坐标
         var left = box.offsetLeft;
         var top = box.offsetTop;

        // 获取鼠标在元素中的坐标
        var x_left = x - left;
        var y_top = y -top;

        //  鼠标点击后改变颜色
        box.style.background = "red";

        //  元素的移动事件函数
        box.onmousemove = function(env){

            // 兼容event事件
          var env = env || window.event;

          //  获取元素移动时的鼠标的坐标
          var x = env.clientX;
          var y = env.clientY;

           //  元素的移动坐标
         box.style.left = (x - x_left)+"px";
         box.style.top = (y - y_top)+"px";

        }
      };


    //  鼠标弹出的事件函数
    box.onmouseup = function(){
        box.style.background = "skyblue";
        // 在鼠标弹出后再次调用元素的鼠标移动事件
        box.onmousemove = function(){};

    };

</script>
</html>

城南花开ze

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
运用js实现图层拖拽的功能

1.需求分析：设计一个元素，可以跟随鼠标的移动，元素也进行移动，并且能够在鼠标按上与按下元素的时候，元素同样可以进行改变样式颜色。2. 设计思路：先是需要获取元素，给元素绑定鼠标按下的事件，在绑定的事件中，兼容event事件，获取鼠标的坐标和元素的坐标，通过鼠标的坐标减去元素的坐标就可以得到鼠标在元素中的坐标。在绑定事件中，写上一个元素的移动事件，获取元素的移动坐标。最后，在鼠标按上的事件函数中...
复制链接

扫一扫