实现支持点击事件、刷新后保留位置拖拽指令的两种方案

拖拽原理：鼠标按下时记录初始坐标以及元素的初始位置，在鼠标移动时计算当前坐标与初始坐标的差值，这个差值就是元素所移动的距离，注意最后移动的时候需要加上元素的初始位置。

观察指令的钩子，我们只需要用到mounted。

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

一个简单的拖拽指令

clientX 和 clientY 是鼠标事件对象中的属性，用于表示鼠标相对于浏览器窗口（视口）的水平和垂直坐标位置。

offsetLeft 和 offsetTop 是 DOM 元素的属性，用于表示该元素相对于其包含元素（父元素）的水平和垂直偏移量。换句话说，它们表示元素的位置，以像素为单位，相对于其父元素的左上角。在拖拽操作中，它们被用来记录元素的初始位置，以便在拖拽过程中计算新的位置。

定义几个变量，当调用 handleMouseDown 函数（鼠标按下元素时）时，将初始的鼠标坐标（event.clientX 和 event.clientY）以及元素的初始位置（el.offsetLeft 和 el.offsetTop）保存在 initialX、initialY、offsetX 和 offsetY 中。同时开启对鼠标移动和松开事件的监听。

import type { ObjectDirective } from 'vue';

const dragSimple: ObjectDirective<HTMLElement> = {
  mounted(el) {
    el.style.position = 'absolute'; 
    el.style.zIndex = '999'; 

    let initialX = 0;
    let initialY = 0;
    let offsetX = 0;
    let offsetY = 0;

    const handleMouseDown = (event: MouseEvent) => {
      if (event.button !== 0)
        return; // 检查是否是鼠标左键
      initialX = event.clientX;
      initialY = event.clientY;
      offsetX = el.offsetLeft;
      offsetY = el.offsetTop;

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    };

    const handleMouseMove = (event: MouseEvent) => {
      const dx = event.clientX - initialX;
      const dy = event.clientY - initialY;

      el.style.left = `${offsetX + dx}px`;
      el.style.top = `${offsetY + dy}px`;
    };

    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    el.addEventListener('mousedown', handleMouseDown);
  },
};

export { dragSimple };

使用

 <div v-drag-simple class="fixed-button">
      <a-button type="primary" size="large" shape="circle" @click="visible = true">
        <template #icon>
          <Icon icon="setting-outlined " />
        </template>
      </a-button>
    </div>

试了一下，拖拽非常的丝滑，没有问题，但是我们发现在拖拽结束的时候click事件被触发了，我和我们想要的效果不符，我们希望在拖拽的时候不要触发这个点击事件，只有在点击的时候才触发。下面提供两个解决方案。

使用阈值

设置一个阈值CLICK_THRESHOLD，当鼠标移动距离不超过阈值就认为是点击事件，超过则为拖拽事件。这种写法需要外部传递一个函数。

实现支持点击事件、刷新后保留位置拖拽指令的两种方案

一个简单的拖拽指令

使用阈值

直接使用pointer-events

加个小功能，刷新后还能保持位置

全站热榜