Vue中实现鼠标按住元素进行拖动

小小前端--可笑可笑

已于 2024-05-09 20:27:18 修改

阅读量218

点赞数 3

文章标签： typescript css

于 2024-04-16 20:37:31 首次发布

本文链接：https://blog.csdn.net/qq_41860203/article/details/137839121

版权

文章描述了一个使用JavaScript编写的函数elementDrag，用于实现鼠标点击后元素跟随鼠标移动并根据特定条件触发自定义事件。该函数涉及鼠标移动、鼠标抬起事件的绑定以及元素样式调整。

摘要由CSDN通过智能技术生成

// Drag the element with the mouse position after clicking
/**
 * elementDrag
 * @param e 鼠标事件
 * @param element 需要拖动的元素
 * @param fn 需要执行的事件
 */
export default function elementDrag(
  eleEvent: MouseEvent,
  element: HTMLElement,
  fn: () => void
) {
  if (element) {
  	// 计算偏移量
    let x = 0,
      y = 0;
    // 点击时鼠标位置
    const diffX = eleEvent.clientX;
    const onMouseMove = (event: MouseEvent) => {
      // 相对一开始的偏移量
      x = event.clientX - diffX;
      y = event.clientY;
      if (element) {
        // 修改元素样式，通过position,left,top实现跟随鼠标位置
        element.style.position = "fixed";
        element.style.zIndex = "10";
        element.style.left = `${x}px`;
        element.style.top = `${y}px`;
      }
    };

    const onMouseUp = () => {
      if (element) {
        // 元素样式复原
        element.style.position = "";
        element.style.zIndex = "0";
        element.style.left = `0px`;
        element.style.top = `0px`;
        element.style.cursor = "cursor";
      }
      // 清除绑定事件   
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
      // 判断执行事件的条件，此处是在鼠标反向滑动距离大于元素一半宽度时执行
      if (x < -Math.floor(element.offsetWidth / 2)) {
        // 执行传入的事件
        fn();
      }
    };
    // 将事件绑定到窗口事件
    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);
  }
}