当前位置： 首页 > article >正文

vue编写一个可拖动的模块，并可以和任何其他组件组合使用

article 2025/1/19 20:59:37

实现思路：

  1. 使用 Vue 的自定义指令（directive）来处理拖动逻辑。
  2. 在 mounted 钩子中添加鼠标事件监听器，以实现拖动功能。
  3. 在 unmounted 钩子中移除鼠标事件监听器，防止内存泄漏。

代码示例：

<template>
  <div v-draggable class="draggable-component">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'DraggableComponent',
  directives: {
    draggable: {
      // 当绑定元素插入到 DOM 中时
      mounted(el) {
        let isDragging = false;
        let initialX, initialY;
        let offsetX = 0, offsetY = 0;

        const handleMouseDown = (e) => {
          isDragging = true;
          initialX = e.clientX - offsetX;
          initialY = e.clientY - offsetY;
        };

        const handleMouseMove = (e) => {
          if (isDragging) {
            offsetX = e.clientX - initialX;
            offsetY = e.clientY - initialY;
            el.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
          }
        };

        const handleMouseUp = () => {
          isDragging = false;
        };

        el.addEventListener('mousedown', handleMouseDown);
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);

        // 在元素销毁时移除事件监听器
        el._removeEventListeners = () => {
          el.removeEventListener('mousedown', handleMouseDown);
          document.removeEventListener('mousemove', handleMouseMove);
          document.removeEventListener('mouseup', handleMouseUp);
        };
      },
      unmounted(el) {
        if (el._removeEventListeners) {
          el._removeEventListeners();
        }
      }
    }
  }
};
</script>

<style scoped>
.draggable-component {
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: move;
}
</style>

代码解释：

  • 模板部分：

    • <div v-draggable class="draggable-component">：使用自定义指令 v-draggable 使该 div 元素具有可拖动的功能。
    • <slot></slot>：使用插槽，允许其他组件或内容插入到这个可拖动的 div 中，从而实现与其他组件的组合使用。

  • 脚本部分：

    • directives：定义了一个名为 draggable 的自定义指令。
      • mounted 钩子：
        • isDragging：用于标记是否正在拖动。
        • initialX 和 initialY：记录鼠标按下时的初始位置。
        • offsetX 和 offsetY：存储元素相对于初始位置的偏移量。
        • handleMouseDown：当鼠标按下时触发，标记为正在拖动，并记录初始位置。
        • handleMouseMove：当鼠标移动且正在拖动时触发，计算偏移量并更新元素的 transform 属性，使用 translate3d 进行元素的平移。
        • handleMouseUp：当鼠标松开时触发，标记为停止拖动。
        • 添加鼠标事件监听器：为元素添加 mousedown 事件监听器，为文档添加 mousemove 和 mouseup 事件监听器。
        • el._removeEventListeners：存储一个函数，用于移除事件监听器。
      • unmounted 钩子：在元素销毁时调用 el._removeEventListeners 移除事件监听器，防止内存泄漏。

使用示例：

<template>
  <div id="app">
    <DraggableComponent>
      <h1>可拖动的组件</h1>
      <p>这是一个可以拖动的模块，并且可以和任何其他组件组合使用。</p>
      <AnotherComponent></AnotherComponent>
    </DraggableComponent>
  </div>
</template>

<script>
import DraggableComponent from './DraggableComponent.vue';
import AnotherComponent from './AnotherComponent.vue';

export default {
  name: 'App',
  components: {
    DraggableComponent,
    AnotherComponent
  }
};
</script>

解释：

  • 首先，将 DraggableComponent 组件导入并注册。
  • 在模板中使用 DraggableComponent 组件，并在其内部使用插槽插入了一个 h1 元素、一个 p 元素和 AnotherComponent 组件，这样就实现了一个可拖动的组件，并且可以方便地与其他组件组合使用。

注意事项：

  • 确保在 unmounted 钩子中移除事件监听器，以避免内存泄漏。
  • 该示例只是一个简单的实现，你可以根据需求扩展功能，例如限制拖动范围、添加拖动手柄等。

通过上述方法，你可以在 Vue 中实现一个可拖动的模块，并将其与任何其他组件进行组合使用。如果你需要更复杂的拖动功能，例如与其他组件进行交互或支持多个可拖动元素，可以考虑使用第三方库，如 vue-draggable 或 vue-draggable-resizable。这些库提供了更丰富的功能和更强大的拖动、调整大小等操作。

还有其他方法实现可拖动模块吗？

另一种在 Vue 中实现可拖动模块的方法，使用 Vue 的 ref 和组件方法来处理拖动逻辑：

实现思路：

  1. 使用 ref 获取元素引用。
  2. 在组件的 mounted 生命周期中添加鼠标事件监听器。
  3. 在鼠标按下、移动和松开时更新元素的位置。

代码示例：

<template>
  <div ref="draggable" class="draggable-component">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'DraggableComponent',
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0
    };
  },
  mounted() {
    const draggable = this.$refs.draggable;
    const handleMouseDown = (e) => {
      this.isDragging = true;
      this.startX = e.clientX - this.offsetX;
      this.startY = e.clientY - this.offsetY;
    };
    const handleMouseMove = (e) => {
      if (this.isDragging) {
        this.offsetX = e.clientX - this.startX;
        this.offsetY = e.clientY - this.startY;
        draggable.style.transform = `translate3d(${this.offsetX}px, ${this.offsetY}px, 0)`;
      }
    };
    const handleMouseUp = () => {
      this.isDragging = false;
    };
    draggable.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
    // 在组件销毁时移除事件监听器
    this.$once('hook:beforeDestroy', () => {
      draggable.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    });
  }
};
</script>

<style scoped>
.draggable-component {
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: move;
}
</style>

代码解释：

  • 模板部分：

    • <div ref="draggable" class="draggable-component">：使用 ref 属性给 div 元素一个引用，方便在组件内部访问。
    • <slot></slot>：使用插槽，允许插入其他组件或内容。

  • 脚本部分：

    • data 中存储拖动所需的状态：
      • isDragging：标记是否正在拖动。
      • startX 和 startY：鼠标按下时的初始位置。
      • offsetX 和 offsetY：元素相对于初始位置的偏移量。
    • mounted 生命周期钩子：
      • 通过 this.$refs.draggable 获取元素引用。
      • handleMouseDown：鼠标按下时记录初始位置并标记为正在拖动。
      • handleMouseMove：鼠标移动时计算偏移量并更新元素的 transform 属性，使用 translate3d 实现平移。
      • handleMouseUp：鼠标松开时标记为停止拖动。
      • 添加事件监听器：为可拖动元素添加 mousedown 事件监听器，为文档添加 mousemove 和 mouseup 事件监听器。
      • this.$once('hook:beforeDestroy',...)：在组件销毁前移除事件监听器，防止内存泄漏。

使用示例：

<template>
  <div id="app">
    <DraggableComponent>
      <h1>可拖动的组件</h1>
      <p>这是另一种实现可拖动模块的方式，可以与其他组件组合使用。</p>
      <AnotherComponent></AnotherComponent>
    </DraggableComponent>
  </div>
</template>

<script>
import DraggableComponent from './DraggableComponent.vue';
import AnotherComponent from './AnotherComponent.vue';

export default {
  name: 'App',
  components: {
    DraggableComponent,
    AnotherComponent
  }
};
</script>

第三种方法：使用 Vue 3 的 Composition API 和 onMounted、onUnmounted：
如果你使用 Vue 3，还可以使用 Composition API 来实现：

<template>
  <div ref="draggable" class="draggable-component">
    <slot></slot>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'DraggableComponent',
  setup() {
    const draggable = ref(null);
    let isDragging = ref(false);
    let startX = ref(0);
    let startY = ref(0);
    let offsetX = ref(0);
    let offsetY = ref(0);

    const handleMouseDown = (e) => {
      isDragging.value = true;
      startX.value = e.clientX - offsetX.value;
      startY.value = e.clientY - offsetY.value;
    };

    const handleMouseMove = (e) => {
      if (isDragging.value) {
        offsetX.value = e.clientX - startX.value;
        offsetY.value = e.clientY - startY.value;
        draggable.value.style.transform = `translate3d(${offsetX.value}px, ${offsetY.value}px, 0)`;
      }
    };

    const handleMouseUp = () => {
      isDragging.value = false;
    };

    onMounted(() => {
      if (draggable.value) {
        draggable.value.addEventListener('mousedown', handleMouseDown);
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
      }
    });

    onUnmounted(() => {
      if (draggable.value) {
        draggable.value.removeEventListener('mousedown', handleMouseDown);
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      }
    });

    return {
      draggable
    };
  }
};
</script>

<style scoped>
.draggable-component {
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: move;
}
</style>

代码解释：

  • 模板部分：
    • 与之前类似，使用 ref 获取元素引用。
  • 脚本部分：
    • 使用 ref 来创建响应式变量：draggable 用于存储元素引用，isDragging、startX、startY、offsetX 和 offsetY 存储拖动状态。
    • handleMouseDown、handleMouseMove 和 handleMouseUp 函数处理鼠标事件。
    • onMounted 钩子添加事件监听器。
    • onUnmounted 钩子移除事件监听器。

这些方法都可以实现可拖动模块，你可以根据自己的喜好和项目使用的 Vue 版本选择合适的实现方式。如果你需要更复杂的拖动功能，例如拖动排序、拖动边界限制、与其他组件交互等，可能需要进一步扩展上述代码或使用第三方库，如 vue-draggable 或 vue-draggable-resizable。

你可以将上述代码复制到相应的 Vue 文件中进行测试和使用，根据自己的需求进行修改和扩展。如果还有其他需求，例如限制拖动范围或添加更多的交互功能，可以进一步细化上述代码或向我提出更具体的问题。


http://www.kler.cn/a/509759.html

相关文章：

  • 学习记录1
  • RV1126+FFMPEG推流项目(9)AI和AENC模块绑定，并且开启线程采集
  • uniapp 微信小程序 editor 富文本编辑器
  • AI-Talk开发板之替换唤醒词
  • 前端【3】--CSS布局，CSS实现横向布局，盒子模型
  • 如何保证光谱相机的稳定性和可靠性
  • 【2024年华为OD机试】 (B卷,100分)- 流水线（Java JS PythonC/C++）
  • 算法之 二叉树
  • 深入理解 SQL 中的 DATEDIFF 函数
  • Python基于Vue+Django网上商城的设计与实现【附源码】
  • “大数据+技校”：VR虚拟仿真实训室的发展前景
  • Windows图形界面(GUI)-QT-C/C++ - Qt Tree Widget详解与应用
  • 【机器学习实战入门】使用OpenCV进行性别和年龄检测
  • list转tensor很慢
  • SpringMVC——原理简介
  • openharmony标准系统芯片移植指导
  • 360AI平台资源可视化建设
  • Java开发提效秘籍：巧用Apache Commons IO工具库
  • 【力扣Hot 100】子串
  • 力扣动态规划-3【算法学习day.97】
  • React 中hooks之useLayoutEffect 用法总结以及与useEffect的区别
  • 多种vue前端框架介绍
  • 【项目推荐】CakeMu-RV：一个开放的 RISC-V 处理器模拟器学习项目
  • 服务器卡顿是否等同于遭受CC攻击？
  • Windows 下 Postgres 安装 TimescaleDB 插件
  • (RAG系列) FastGPT通过API调用工作流问答