js限定区域范围拖拉拽

最新推荐文章于 2023-05-11 22:04:17 发布

码尚

最新推荐文章于 2023-05-11 22:04:17 发布

阅读量1k

点赞数 2

文章标签： html javascript css3

本文链接：https://blog.csdn.net/weixin_43305946/article/details/109803176

版权

js限定区域范围拖拉拽

需要在范围内拖拉拽，之前看来许多资料觉得都不是特别满足要求，今天自己写了一个，通过监听鼠标按下、鼠标抬起、鼠标移动事件来控制

代码如下

<!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>

      #drag {

        background: aqua;

        width: 200px;

        height: 200px;

        position: absolute;

        -moz-user-select: none;

        -khtml-user-select: none;

        user-select: none;

      }

      #parent {

        position: relative;

        background: #cde4dc;

        height: 80vh;

        overflow: hidden;

      }

    </style>

  </head>

  <body>

    <section id="parent">

      <div id="drag"><div>这是一个测试</div></div>

    </section>

    <script type="text/javascript">

      //自执行函数,需要拖拽的元素需要设置position:absolute,父元素position:relative

      //有传父亲节点、若无则默认body为父节点

      ((parent, children, mouseType) => {

        if (!children) return;

        let childrenDiv = document.querySelector(children);

        childrenDiv.style.position = 'absolute';

        let parentDiv = parent

          ? document.querySelector(parent)

          : document.querySelector('body');

        let isDown = false;

        let x,

          y,

          l,

          t = 0;

        childrenDiv.onmousedown = function (e) {

          x = e.clientX;

          y = e.clientY;

          // 获取左部和底部的偏移量

          l = childrenDiv.offsetLeft;

          t = childrenDiv.offsetTop;

          isDown = true;

          childrenDiv.style.cursor = mouseType || 'move';

        };

        // 鼠标移动

        window.onmousemove = function (e) {

          if (!isDown) {

            return;

          }

          //获取移动后的x和y坐标

          let nx = e.clientX;

          let ny = e.clientY;

          //获取父元素的宽高

          let parentWidth = parentDiv.clientWidth;

          let parentHeight = parentDiv.clientHeight;

          //获取子元素的宽高

          let childrenWidth = childrenDiv.clientWidth;

          let childrenHight = childrenDiv.clientHeight;

          // 计算移动后的左偏移量和顶部偏移量

          let nLeft = nx - (x - l);

          let nTop = ny - (y - t);

          let nRight = nLeft + childrenWidth;

          let nBottom = nTop + childrenHight;

          nLeft = nLeft <= 0 ? 0 : nLeft; //判断左边距离是否越界

          nTop = nTop <= 0 ? 0 : nTop; //判断上边距离是否越界

          //判断右边距离大于父元素宽度

          if (nRight >= parentWidth) {

            nLeft = parentWidth - childrenHight;

          }

          // 判断下边界是否越界

          if (nBottom >= parentHeight) nTop = parentHeight - childrenHight;

          childrenDiv.style.left = nLeft + 'px';

          childrenDiv.style.top = nTop + 'px';

        };

        // 鼠标抬起事件

        document.onmouseup = function (e) {

          //鼠标抬起

          isDown = false;

          childrenDiv.style.cursor = 'default';

        };

      })('#parent', '#drag', 'move');

    </script>

  </body>

</html>

在这里插入图片描述

码尚

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
3
评论
js限定区域范围拖拉拽

js限定区域范围拖拉拽需要在范围内拖拉拽，之前看来许多资料觉得都不是特别满足要求，今天自己写了一个，通过监听鼠标按下、鼠标抬起、鼠标移动事件来控制代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫