如何使用 Vue 自定义指令实现元素拖拽支撑横向和纵向拖拽

1.介绍

在 web 开发中,有时我们需要让用户能够拖拽页面上的元素。Vue 提供了一个强大的机制,允许我们创建自定义指令来实现这种功能。自定义指令可以直接操作 DOM 元素,使其具有更强的灵活性和可控性

2. 实现自定义指令

javascript 复制代码
export default {
  bind(el, binding) {
    let startX, startY, initialX, initialY;

    function onMouseDown(e) {
      startX = e.clientX;
      startY = e.clientY;
      initialX = el.offsetLeft;
      initialY = el.offsetTop;

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
      document.addEventListener('mouseleave', onMouseLeave);

      e.preventDefault();
    }

    function onMouseMove(e) {
      const moveX = e.clientX - startX;
      const moveY = e.clientY - startY;
      const elRect = el.getBoundingClientRect();
      const elementWidth = elRect.width;
      const elementHeight = elRect.height;
      let newLeft = initialX + moveX;
      let newTop = initialY + moveY;
      const maxRight = window.innerWidth - elementWidth;
      const maxBottom = window.innerHeight - elementHeight - 1;

      if (binding.value?.axisy) {
        newLeft = maxRight;
      } else {
        newLeft = Math.max(0, Math.min(newLeft, maxRight));
      }

      if (binding.value?.axisx) {
        newTop = maxBottom;
      } else {
        newTop = Math.max(110, Math.min(newTop, maxBottom)); // 防止溢出,并且不让顶部少于 110px
      }

      el.style.left = `${newLeft}px`;
      el.style.top = `${newTop}px`;

      if (binding.value?.callback) {
        binding.value.callback({
          top: newTop,
          bottom: maxBottom - newTop,
          left: newLeft,
          right: maxRight - newLeft,
        });
      }
    }

    function onMouseUp() {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      document.removeEventListener('mouseleave', onMouseLeave);
    }

    function onMouseLeave() {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      document.removeEventListener('mouseleave', onMouseLeave);
    }

    el.addEventListener('mousedown', onMouseDown);

    el._cleanup = () => {
      el.removeEventListener('mousedown', onMouseDown);
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      document.removeEventListener('mouseleave', onMouseLeave);
    };
  },
  unbind(el) {
    el._cleanup();
  },
};

3.代码说明

  • bind 方法:这个方法在指令绑定到元素时调用。我们在这里初始化了一些变量,并定义了鼠标事件处理函数
  • 事件处理函数onMouseDownonMouseMoveonMouseUponMouseLeave 分别处理鼠标按下、移动、抬起和离开事件。
  • 事件监听器管理 :在 bind 方法中添加事件监听器,并在 unbind 方法中移除它们,以确保指令解绑时不会留下多余的事件监听器。

4. 使用指令

你可以在组件中使用这个指令:

javascript 复制代码
<template>
  <div v-drag="{ axisx: false, axisy: false, callback: onDrag }" style="position: absolute;">
    拖拽我
  </div>
</template>

<script>
import drag from './directives/drag';

export default {
  directives: {
    drag,
  },
  methods: {
    onDrag(pos) {
      console.log('拖拽位置:', pos);
    },
  },
};
</script>

在这个示例中,我们将 v-drag 指令应用到一个 div 元素上,通过设置 axisxaxisy 来控制拖拽方向,并在拖拽时调用 callback 处理函数。

相关推荐
EndingCoder21 分钟前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手21 分钟前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评25 分钟前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组25 分钟前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg5 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz6 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码6 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v7 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山7 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin7 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack