ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue编写一个可拖动的模块，并可以和任何其他组件组合使用 [打印本页]

---

作者: 道家人    时间: 12 小时前
标题: vue编写一个可拖动的模块，并可以和任何其他组件组合使用
实现思路：

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

代码示例：

1. <template>
2.   <div v-draggable class="draggable-component">
3.     <slot></slot>
4.   </div>
5. </template>
7. <script>
8. export default {
9.   name: 'DraggableComponent',
10.   directives: {
11.     draggable: {
12.       // 当绑定元素插入到 DOM 中时
13.       mounted(el) {
14.         let isDragging = false;
15.         let initialX, initialY;
16.         let offsetX = 0, offsetY = 0;
18.         const handleMouseDown = (e) => {
19.           isDragging = true;
20.           initialX = e.clientX - offsetX;
21.           initialY = e.clientY - offsetY;
22.         };
24.         const handleMouseMove = (e) => {
25.           if (isDragging) {
26.             offsetX = e.clientX - initialX;
27.             offsetY = e.clientY - initialY;
28.             el.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
29.           }
30.         };
32.         const handleMouseUp = () => {
33.           isDragging = false;
34.         };
36.         el.addEventListener('mousedown', handleMouseDown);
37.         document.addEventListener('mousemove', handleMouseMove);
38.         document.addEventListener('mouseup', handleMouseUp);
40.         // 在元素销毁时移除事件监听器
41.         el._removeEventListeners = () => {
42.           el.removeEventListener('mousedown', handleMouseDown);
43.           document.removeEventListener('mousemove', handleMouseMove);
44.           document.removeEventListener('mouseup', handleMouseUp);
45.         };
46.       },
47.       unmounted(el) {
48.         if (el._removeEventListeners) {
49.           el._removeEventListeners();
50.         }
51.       }
52.     }
53.   }
54. };
55. </script>
57. <style scoped>
58. .draggable-component {
59.   position: absolute;
60.   background-color: #f0f0f0;
61.   border: 1px solid #ccc;
62.   padding: 10px;
63.   cursor: move;
64. }
65. </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 移除事件监听器，防止内存泄漏。
      
    
    
  
  

使用示例：

1. <template>
2.   <div id="app">
3.     <DraggableComponent>
4.       <h1>可拖动的组件</h1>
5.       <p>这是一个可以拖动的模块，并且可以和任何其他组件组合使用。</p>
6.       <AnotherComponent></AnotherComponent>
7.     </DraggableComponent>
8.   </div>
9. </template>
11. <script>
12. import DraggableComponent from './DraggableComponent.vue';
13. import AnotherComponent from './AnotherComponent.vue';
15. export default {
16.   name: 'App',
17.   components: {
18.     DraggableComponent,
19.     AnotherComponent
20.   }
21. };
22. </script>

复制代码

解释：

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

留意事项：

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

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

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

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

代码示例：

1. <template>
2.   <div ref="draggable" class="draggable-component">
3.     <slot></slot>
4.   </div>
5. </template>
7. <script>
8. export default {
9.   name: 'DraggableComponent',
10.   data() {
11.     return {
12.       isDragging: false,
13.       startX: 0,
14.       startY: 0,
15.       offsetX: 0,
16.       offsetY: 0
17.     };
18.   },
19.   mounted() {
20.     const draggable = this.$refs.draggable;
21.     const handleMouseDown = (e) => {
22.       this.isDragging = true;
23.       this.startX = e.clientX - this.offsetX;
24.       this.startY = e.clientY - this.offsetY;
25.     };
26.     const handleMouseMove = (e) => {
27.       if (this.isDragging) {
28.         this.offsetX = e.clientX - this.startX;
29.         this.offsetY = e.clientY - this.startY;
30.         draggable.style.transform = `translate3d(${this.offsetX}px, ${this.offsetY}px, 0)`;
31.       }
32.     };
33.     const handleMouseUp = () => {
34.       this.isDragging = false;
35.     };
36.     draggable.addEventListener('mousedown', handleMouseDown);
37.     document.addEventListener('mousemove', handleMouseMove);
38.     document.addEventListener('mouseup', handleMouseUp);
39.     // 在组件销毁时移除事件监听器
40.     this.$once('hook:beforeDestroy', () => {
41.       draggable.removeEventListener('mousedown', handleMouseDown);
42.       document.removeEventListener('mousemove', handleMouseMove);
43.       document.removeEventListener('mouseup', handleMouseUp);
44.     });
45.   }
46. };
47. </script>
49. <style scoped>
50. .draggable-component {
51.   position: absolute;
52.   background-color: #f0f0f0;
53.   border: 1px solid #ccc;
54.   padding: 10px;
55.   cursor: move;
56. }
57. </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',...)：在组件烧毁前移除事件监听器，防止内存泄漏。
      
    
    
  
  

使用示例：

1. <template>
2.   <div id="app">
3.     <DraggableComponent>
4.       <h1>可拖动的组件</h1>
5.       <p>这是另一种实现可拖动模块的方式，可以与其他组件组合使用。</p>
6.       <AnotherComponent></AnotherComponent>
7.     </DraggableComponent>
8.   </div>
9. </template>
11. <script>
12. import DraggableComponent from './DraggableComponent.vue';
13. import AnotherComponent from './AnotherComponent.vue';
15. export default {
16.   name: 'App',
17.   components: {
18.     DraggableComponent,
19.     AnotherComponent
20.   }
21. };
22. </script>

复制代码

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

1. <template>
2.   <div ref="draggable" class="draggable-component">
3.     <slot></slot>
4.   </div>
5. </template>
7. <script>
8. import { ref, onMounted, onUnmounted } from 'vue';
10. export default {
11.   name: 'DraggableComponent',
12.   setup() {
13.     const draggable = ref(null);
14.     let isDragging = ref(false);
15.     let startX = ref(0);
16.     let startY = ref(0);
17.     let offsetX = ref(0);
18.     let offsetY = ref(0);
20.     const handleMouseDown = (e) => {
21.       isDragging.value = true;
22.       startX.value = e.clientX - offsetX.value;
23.       startY.value = e.clientY - offsetY.value;
24.     };
26.     const handleMouseMove = (e) => {
27.       if (isDragging.value) {
28.         offsetX.value = e.clientX - startX.value;
29.         offsetY.value = e.clientY - startY.value;
30.         draggable.value.style.transform = `translate3d(${offsetX.value}px, ${offsetY.value}px, 0)`;
31.       }
32.     };
34.     const handleMouseUp = () => {
35.       isDragging.value = false;
36.     };
38.     onMounted(() => {
39.       if (draggable.value) {
40.         draggable.value.addEventListener('mousedown', handleMouseDown);
41.         document.addEventListener('mousemove', handleMouseMove);
42.         document.addEventListener('mouseup', handleMouseUp);
43.       }
44.     });
46.     onUnmounted(() => {
47.       if (draggable.value) {
48.         draggable.value.removeEventListener('mousedown', handleMouseDown);
49.         document.removeEventListener('mousemove', handleMouseMove);
50.         document.removeEventListener('mouseup', handleMouseUp);
51.       }
52.     });
54.     return {
55.       draggable
56.     };
57.   }
58. };
59. </script>
61. <style scoped>
62. .draggable-component {
63.   position: absolute;
64.   background-color: #f0f0f0;
65.   border: 1px solid #ccc;
66.   padding: 10px;
67.   cursor: move;
68. }
69. </style>

复制代码

代码解释：

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

这些方法都可以实现可拖动模块，你可以根据自己的喜欢和项目使用的 Vue 版本选择合适的实现方式。如果你需要更复杂的拖动功能，例如拖动排序、拖动边界限定、与其他组件交互等，大概需要进一步扩展上述代码或使用第三方库，如 vue-draggable 或 vue-draggable-resizable。
你可以将上述代码复制到相应的 Vue 文件中举行测试和使用，根据自己的需求举行修改和扩展。如果还有其他需求，例如限定拖动范围或添加更多的交互功能，可以进一步细化上述代码或向我提出更具体的问题。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4