vue实现盒子拖拽

Vue 实现盒子拖拽

在 Vue 中实现盒子拖拽功能可以通过原生 HTML5 的拖放 API 或第三方库（如 vuedraggable）来完成。以下是两种方法的实现方式：

使用原生 HTML5 拖放 API

1. 设置可拖拽元素
   通过 draggable="true" 属性标记元素为可拖拽，并监听 dragstart 事件存储拖拽数据。

   <template>
     <div 
       class="box" 
       draggable="true" 
       @dragstart="handleDragStart"
     >
       拖拽我
     </div>
   </template>

   methods: {
     handleDragStart(e) {
       e.dataTransfer.setData('text/plain', e.target.id);
     }
   }

2. 设置放置区域
   监听 dragover 和 drop 事件，阻止默认行为并处理放置逻辑。

   <div 
     class="drop-area" 
     @dragover.prevent 
     @drop="handleDrop"
   >
     放置区域
   </div>

   methods: {
     handleDrop(e) {
       const draggedId = e.dataTransfer.getData('text/plain');
       const draggedElement = document.getElementById(draggedId);
       e.target.appendChild(draggedElement);
     }
   }

使用 vuedraggable 库

1. 安装库
   通过 npm 或 yarn 安装 vuedraggable：

   npm install vuedraggable

2. 实现列表拖拽
   使用 vuedraggable 组件实现列表项的拖拽排序。

   

   <template>
     <draggable v-model="items" @end="onDragEnd">
       <div v-for="item in items" :key="item.id">
         {{ item.name }}
       </div>
     </draggable>
   </template>

   import draggable from 'vuedraggable';
   
   export default {
     components: { draggable },
     data() {
       return {
         items: [
           { id: 1, name: 'Item 1' },
           { id: 2, name: 'Item 2' },
         ]
       };
     },
     methods: {
       onDragEnd() {
         console.log('拖拽完成');
       }
     }
   };

注意事项

• 原生拖放 API 需要处理更多细节（如样式、兼容性），适合简单场景。
• vuedraggable 提供了更丰富的功能（如动画、跨列表拖拽），适合复杂需求。
• 移动端可能需要额外处理触摸事件。