鼠标对div框拖拽缩放叠层操作（vue3版本+js）

 先设置了三个模拟框，当鼠标移动到div上删除按钮和缩放表示可以显示出来

布局代码示例如下：

类似于<el-xxxx/>等标签是取自elementplus，没有导入的需要自行导入

    <div id="container">
    <div
      id="box"
      v-for="index in 3"
      :key="index"
      @mousedown="dragAble(index)"
      :itemid="index"
      :style="{ zIndex: index }"
    >
      <span class="close-btn" @click.prevent="deleteChart(index)"
        ><el-icon><Close /></el-icon
      ></span>
      <div id="main"></div>
      <div id="scale" class="double-arrow-btn" @mousedown="scaleAble(index)">
        <el-icon><TopLeft /></el-icon><el-icon><BottomRight /></el-icon>
      </div>
    </div>
    </div>
/**
*页面样式
*/
#box {
  width: 40%;
  height: 40%;
  position: absolute;
  cursor: move;
  border: solid 1px #ddd;
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: white;
}
#main {
  width: 95%;
  height: 95%;
  position: relative;
}
.double-arrow-btn {
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: none;
}
.close-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  display: none;
}
#box:hover .close-btn {
  display: block;
  cursor: pointer;
}
#box:hover .double-arrow-btn {
  display: block;
  cursor: se-resize;
}
#container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: absolute;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

 拖拽方法dragAble()

const dragAble = (index, e: any) => {
  console.log("index:"+index);
  
  //获取drag元素
  console.log(document.querySelectorAll("#box"));
  var drag1 = document.querySelectorAll("#box") as NodeListOf<HTMLElement>;

  let drag = drag1[index - 1];

  //当鼠标按下时
  // drag.onmousedown = function (e: any) {
  //阻止冒泡 避免缩放触发移动事件
  // e.stopPropagation();
  // e.preventDefault();
  // console.log("正在拖拽");

  // drag.style.zIndex = (drag.style.zIndex)+1;
  console.log(drag.style.zIndex);

  //做到浏览器兼容
  e = e || window.event;
  let diffX = e.clientX - drag.offsetLeft;
  let diffY = e.clientY - drag.offsetTop;

  document.onmousemove = function (e: any) {
    e.preventDefault();
    let left = e.clientX - diffX;
    let top = e.clientY - diffY;
    if (left < 0) {
      left = 0;
    } else if (left > window.innerWidth - drag.offsetWidth) {
      left = window.innerWidth - drag.offsetWidth;
    }
    if (top < 0) {
      top = 0;
    } else if (top > window.innerHeight - drag.offsetHeight) {
      top = window.innerHeight - drag.offsetHeight;
    }
    drag.style.left = left + "px";
    drag.style.top = top + "px";
  };

  // 当鼠标抬起时
  document.onmouseup = function () {
    this.onmousemove = null;
    this.onmouseup = null;
  };
  drag.onmouseleave = function () {
    drag.onmousemove = null;
    drag.onmouseup = null;
  };
};

缩放方法scaleAble()

const scaleAble = (index, e: any) => {
  //获取drag元素
  const drag1 = document.querySelectorAll("#box") as NodeListOf<HTMLElement>;
  let drag = drag1[index - 1];
  const scale1 = document.querySelectorAll(
    ".double-arrow-btn"
  ) as NodeListOf<HTMLElement>;
  let scale = scale1[index - 1];
  const box = document.getElementById("container");
  // scale.onmousedown = function (e: any) {
  e = e || window.event;
  console.log("正在缩放");
  //阻止冒泡 避免缩放触发移动事件
  e.stopPropagation();
  // 取消事件的默认动作
  e.preventDefault();
  // 定义position
  var position = {
    w: drag.offsetWidth, // 被缩放元素的offsetWidth
    h: drag.offsetHeight, // 被缩放元素的offsetHeight
    x: e.clientX, // 当前窗口鼠标指针的水平坐标
    y: e.clientY, // 当前窗口鼠标指针的垂直坐标
  };

  drag.onmousemove = function (e: any) {
    e = e || window.event;
    e.preventDefault();
    // 设置最大缩放为30*30 Math.max取最大值

    var w = Math.max(30, e.clientX - position.x + position.w);
    var h = Math.max(30, e.clientY - position.y + position.h);
    console.log(h);
    // 设置最大的宽高
    w =
      w >= box.offsetWidth - drag.offsetLeft
        ? box.offsetWidth - drag.offsetLeft
        : w;
    h =
      h >= box.offsetHeight - drag.offsetTop
        ? box.offsetHeight - drag.offsetTop
        : h;
    console.log(w);
    console.log(h);

    drag.style.width = w + "px";
    drag.style.height = h + "px";
  };
  document.onmouseup = function () {
    drag.onmousemove = null;
    drag.onmouseup = null;
  };
  drag.onmouseleave = function () {
    drag.onmousemove = null;
    drag.onmouseup = null;
  };
};

叠层方法changePlace()

  var drag1 = document.querySelectorAll("#box") as NodeListOf<HTMLElement>;
  let drag = drag1[index - 1];
  var maxIndex = index - 1;
  var maxDrag = drag;
  if(drag1.length>1){
    for (var i = 0; i < drag1.length; i++) {
    if (drag1[i].style.zIndex > maxDrag.style.zIndex) {
      maxDrag = drag1[i];
      maxIndex = i;
    }
  }
  var temp=maxDrag.style.zIndex
  for(var k=0;k<drag1.length;k++){
    if(drag1[k].style.zIndex>drag.style.zIndex){
      drag1[k].style.zIndex=String(parseInt(drag1[k].style.zIndex)-1);
      continue
    }
  }
  drag.style.zIndex=temp
  }

假删除只具有提示作用，此处只是测试删除按钮是否可用deleteChart ()

const deleteChart = (index:any) => {
alert("此处为假删除！！！")
};