实现web页面元素的拖拽和缩放

最新推荐文章于 2023-06-15 05:00:00 发布

小志哥斯拉

最新推荐文章于 2023-06-15 05:00:00 发布

阅读量734

点赞数

分类专栏： javaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_55510188/article/details/120387815

版权

javaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

通过js监听鼠标事件，实现web页面元素的拖拽和缩放，完整代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 100%;
      height: calc(100vh);
      position: relative;
      background: #009688;
    }

    #drag {
      width: 200px;
      height: 200px;
      position: relative;
      background: #EB7350;
      cursor: move;
    }
  </style>
</head>

<body>

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

  <!-- js实现代码 -->
  <script>
    window.onload = function () {
      var box = document.getElementById("box");
      var drag = document.getElementById("drag");

      //鼠标事件
      dragTool(drag);
      scaleTool(drag, box);

      //拖拽方法
      function dragTool(node) {
        node.onmousedown = function (ev) {
          //浏览器兼容
          var e = ev || window.event;
          //鼠标相对元素距离
          var offsetX = ev.offsetX;
          var offsetY = ev.offsetY;

          document.onmousemove = function (ev) {
            //浏览器兼容
            var e = ev || window.event;
            //定义currentLeft
            var currentLeft = e.clientX - offsetX;
            //定义currentTop
            var currentTop = e.clientY - offsetY;

            //限制左边界
            if (currentLeft <= 0) {
              currentLeft = 0;
            }
            //限制右边界
            var windowWidth = document.documentElement.clientWidth || document.body.clientWidth
            if (currentLeft >= windowWidth - node.offsetWidth) {
              currentLeft = windowWidth - node.offsetWidth
            }
            //限制上边界
            if (currentTop <= 0) {
              currentTop = 0;
            }
            //限制下边界
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
            if (currentTop >= windowHeight - node.offsetHeight) {
              currentTop = windowHeight - node.offsetHeight
            }

            //被拖拽元素的left top 值
            node.style.left = currentLeft + "px";
            node.style.top = currentTop + "px";
          }
        }

        document.onmouseup = function () {
          document.onmousemove = null;
        }
      }

      //缩放方法
      function scaleTool(drag, box) {
        //判断鼠标滚轮滚动方向
        if (drag.addEventListener) {
          drag.addEventListener('DOMMouseScroll', wheel, false);
        }
        drag.onmousewheel = wheel;
        //统一处理滚轮滚动事件
        function wheel(event) {
          var delta = 0;
          if (!event) event = window.event;
          if (event.wheelDelta) {
            delta = event.wheelDelta / 120;
            if (window.opera) delta = -delta;
          } else if (event.detail) {
            delta = -event.detail / 3;
          }
          if (delta)
            handle(delta);
        }
        //上下滚动时的具体处理函数
        function handle(delta) {
          //获取当前值
          var w = drag.offsetWidth;
          var h = drag.offsetHeight;
          var top = drag.offsetTop;
          var left = drag.offsetLeft;
          var right = box.offsetWidth - (left + w);
          var bottom = box.offsetHeight - (top + h)
          var step = 0.1;

          if (delta < 0) { //向下滚动

            //设置最小值
            var currentw = Math.max(100, w - w * step);
            var currenth = Math.max(100, h - h * step);
            if (currentw !== 100 || currenth !== 100) {
              //设置最大值，不大于外部元素
              currentw = currentw >= box.offsetWidth ? box.offsetWidth : currentw;
              currenth = currenth >= box.offsetHeight ? box.offsetHeight : currenth;
              //设置不超出元素范围
              var currenttop = (top + (h * step / 2)) < 0 ? 0 : (top + (h * step / 2));
              var currentleft = (left + (w * step / 2)) < 0 ? 0 : (left + (w * step / 2));
              var currentright = (right + (w * step / 2)) < 0 ? 0 : (right + (w * step / 2));
              var currentbottom = (bottom + (h * step / 2)) < 0 ? 0 : (bottom + (h * step / 2));

              drag.style.width = currentw + "px";
              drag.style.height = currenth + "px";
              drag.style.top = currenttop + "px";
              drag.style.left = currentleft + "px";
              drag.style.right = currentright + "px";
              drag.style.bottom = currentbottom + "px";
            }
          } else { //向上滚动

            //设置最小值
            var currentw = Math.max(100, w + w * step);
            var currenth = Math.max(100, h + h * step);
            if (currentw !== 100 || currenth !== 100) {
              //设置最大值，不大于/超出窗口
              currentw = currentw >= box.offsetWidth ? box.offsetWidth : currentw;
              currenth = currenth >= box.offsetHeight ? box.offsetHeight : currenth;
              //设置不超出元素范围
              var currenttop = (top - (h * step / 2)) < 0 ? 0 : (top - (h * step / 2));
              var currentleft = (left - (w * step / 2)) < 0 ? 0 : (left - (w * step / 2));
              var currentright = (right - (w * step / 2)) < 0 ? 0 : (right - (w * step / 2));
              var currentbottom = (bottom - (h * step / 2)) < 0 ? 0 : (bottom - (h * step / 2));

              drag.style.width = currentw + "px";
              drag.style.height = currenth + "px";
              drag.style.top = currenttop + "px";
              drag.style.left = currentleft + "px";
              drag.style.right = currentright + "px";
              drag.style.bottom = currentbottom + "px";
            }
          }
        }
      }

    }
  </script>
</body>

</html>

小志哥斯拉

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
实现web页面元素的拖拽和缩放

通过js监听鼠标事件，实现web页面元素的拖拽和缩放，完整代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } #box { width: 100%; height:
复制链接

扫一扫