js实现容器的拖动效果

容器及其元素

 <div id="imgDiv">
        <img
          id="pic"
          alt
          style="overflow:hidden;position:absolute;top:0px;left:0px"
          @mousedown="draggePic($event)"
        />
  </div>

操作元素

 draggePic(event) {
      //制作一个鼠标左键拖拽效果
      var pic = document.getElementById("pic");
      var picLeft = parseFloat(pic.style.left);
      var picTop = parseFloat(pic.style.top);
      if (event.button !== 0) {
        return; //不是鼠标左键，return
      }
      pic.onmousemove = function (e) {
        picLeft += e.movementX; //距上次鼠标位置的X长度
        picTop += e.movementY; //距上次鼠标位置的Y长度
        pic.style.left = picLeft + "px";
        pic.style.top = picTop + "px";
      };
      pic.onmouseup = pic.onmouseleave = function () {
        if (event.button === 0) {
          //鼠标左键
          pic.onmousemove = null;
        }
      };
    },