vue项目拖拽功能

最新推荐文章于 2024-05-11 14:12:39 发布

随便谢谢欸

最新推荐文章于 2024-05-11 14:12:39 发布

阅读量239

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_38786840/article/details/126264949

版权

自定义拖拽指令

 <template>
   <ShopInfo v-drag :shopInformation="shopInformation" />
 </template>

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 >= 0 ? left : 0) + 'px';
            oDiv.style.top = (top >= 0 ? top : 0) + 'px';
          };
          document.onmouseup = e => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  },