JS-拖拽位移、放大缩小

对同一盒子拖拽位移、缩放,这其实是不符合js的逻辑的,位移和拖拽必然会互相影响,所以需要在布局上略加调整

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .resize-box {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50px;
      top: 50px;
      cursor: move;
      background-color: #ccc;
      border: 1px solid #000;
    }
    .resize {
      width: 20px;
      height: 20px;
      background-color: #000;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 100;
      cursor: se-resize;
    }
  </style>
</head>
<body>
<div class="resize-box">
  <div class="resize"></div>
</div>
<script>
  const resizeBox = document.querySelector('.resize-box');
  const resize = document.querySelector('.resize');
  let isResizing = false;
  let startX, startY, startWidth, startHeight;
  resize.onmousedown = function(e) {
    preventFun(e);
    isResizing = true;
    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(getComputedStyle(resizeBox).width, 10);
    startHeight = parseInt(getComputedStyle(resizeBox).height, 10);

    document.onmousemove = function(e) {
      preventFun(e);
      const deltaX = e.clientX - startX;
      const deltaY = e.clientY - startY;
      resizeBox.style.width = (startWidth + deltaX) + 'px';
      resizeBox.style.height = (startHeight + deltaY) + 'px';
    };
    document.onmouseup = closeDragElement;
  };

  function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;
    function dragMouseDown(e) {
      preventFun(e);
      e.preventDefault();
      e = e || window.event;
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmousemove = elementDrag;
      document.onmouseup = closeDragElement;
    }

    function elementDrag(e) {
      preventFun(e);
      e = e || window.event;
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
      elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }
  }

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

  dragElement(resizeBox);

  function preventFun(e) {
    // 阻止默认事件
    e.preventDefault();
    e.returnValue;
    // 阻止冒泡
    if (e && e.stopPropagatio) {
      e.stopPropagation();
    } else {
      window.event.cancelBubble = true;
    }
  }

</script>
</body>
</html>

位移还是通过自身来实现,缩放则是通过加一个盒子间接操作,这样互相之间不会冲突,当然还要加上去除冒泡 和 默认事件,这样就可以了

相关推荐
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
吖秧吖1 小时前
three.js 杂记
开发语言·前端·javascript
前端小超超1 小时前
vue3 ts项目结合vant4 复选框+气泡弹框实现一个类似Select样式的下拉选择功能
前端·javascript·vue.js
大叔是90后大叔1 小时前
vue3中查找字典列表中某个元素的值
前端·javascript·vue.js
IT大玩客1 小时前
JS如何获取MQTT的主题
开发语言·javascript·ecmascript