拖拽图片到任意位置

<img v-drag id="img" draggable="false" @contextmenu.prevent src="../assets/image/IP.png" class="img" >


directives: {
    drag: {
      // 指令的定义
      bind: function(el) {
        // 获取当前元素
        let oDiv = el;
        oDiv.onmousedown = (e) => {
          // 算出鼠标相对元素的位置
          let disX = e.clientX - oDiv.offsetLeft ;
          let disY = e.clientY - oDiv.offsetTop ;
 
          document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;
 
            oDiv.style.left = left + 'px';
            oDiv.style.top = top + 'px';
          };
          document.onmouseup = () => {
            console.log(11)
            document.onmousemove = null;
            document.onmouseup = null;
          }
        }
      }
    }
  }


.img {
    position: absolute;
    width: 120px;
    float: left;
    height: 120px;
    bottom: 0px;
    right: 0;
    z-index: 88;
  }

 

posted on 2022-08-19 08:55  愿你笑时风华正茂  阅读(59)  评论(1)    收藏  举报

导航