自定义v-drag指令

原创已于 2023-10-11 17:23:17 修改 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

于 2023-06-13 20:43:38 首次发布

该代码示例展示了如何在Vue中创建一个自定义指令`v-drag`，用于实现元素的拖放功能。通过绑定鼠标移动事件，计算鼠标相对于元素的位置，动态改变元素的left和top样式属性，从而实现元素随鼠标移动。当鼠标抬起时，解除事件监听，并可选地调用回调函数传递元素的新位置信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.directive('drag',{
  bind: function (el, binding) {
    let _this = el;  //获取当前元素
    //监听document是因为如果监听元素el的话鼠标太快移出元素后就会失效
    el.onmousedown = (event) => {
      //算出鼠标相对元素的位置
      let pointX = event.clientX - el.offsetLeft;//鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
      let pointY = event.clientY - el.offsetTop;//鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）
      let left, top
      document.onmousemove = (e)=>{
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        left = e.clientX - pointX;
        top = e.clientY - pointY;

        //移动当前元素
        el.style.left = left + 'px';
        el.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        // v-drag="callback"；可以使用回调callback(options)获取参数
        if (binding) {
          binding.value({ id: el.id, top: _this.style.top, left: _this.style.left });
        }
      };
    };
  }
})