在Vue中实现页面拖拽自定义组件或元素，你可以使用HTML5的拖放API（Drag and Drop API）结合Vue的响应式数据系统来实现。下面是一个基本的步骤指南和示例代码，展示如何用Vue实现一个简单的拖拽功能。

步骤 1: 创建Vue项目

如果你还没有Vue项目，你可以使用Vue CLI来创建一个：

bash复制代码
 npm install -g @vue/cli  
 
 vue create my-vue-drag-drop  
 
 cd my-vue-drag-drop  
 
 npm run serve
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

步骤 2: 添加拖拽逻辑

在Vue组件中，我们将添加拖拽的HTML属性（如draggable），并监听相关的事件（如dragstart, dragover, drop等）。

组件模板 (DragItem.vue)
vue复制代码
 <template>  
 
   <div  
 
     class="draggable-item"  
 
     draggable="true"  
 
     @dragstart="dragStart($event, item)"  
 
     @dragover.prevent  
 
     @drop="drop($event, item)"  
 
   >  
 
     {{ item.name }}  
 
   </div>  
 
 </template>  
 
   
 
 <script>  
 
 export default {  
 
   props: ['item'],  
 
   methods: {  
 
     dragStart(event, item) {  
 
       // 设置拖拽数据  
 
       event.dataTransfer.setData('text/plain', JSON.stringify(item));  
 
     },  
 
     drop(event, item) {  
 
       // 这里只是示例，通常你会在这里处理放置逻辑  
 
       console.log('Dropped:', item, 'at', event.target);  
 
       // 阻止默认处理（如链接导航）  
 
       event.preventDefault();  
 
     }  
 
   }  
 
 }  
 
 </script>  
 
   
 
 <style>  
 
 .draggable-item {  
 
   padding: 10px;  
 
   margin: 5px;  
 
   border: 1px solid #ccc;  
 
   background-color: #f9f9f9;  
 
   cursor: move;  
 
 }  
 
 </style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
父组件 (App.vue)
vue复制代码
 <template>  
 
   <div id="app">  
 
     <drag-item  
 
       v-for="(item, index) in items"  
 
       :key="index"  
 
       :item="item"  
 
     ></drag-item>  
 
   </div>  
 
 </template>  
 
   
 
 <script>  
 
 import DragItem from './components/DragItem.vue'  
 
   
 
 export default {  
 
   components: {  
 
     DragItem  
 
   },  
 
   data() {  
 
     return {  
 
       items: [  
 
         { id: 1, name: 'Item 1' },  
 
         { id: 2, name: 'Item 2' },  
 
         { id: 3, name: 'Item 3' }  
 
       ]  
 
     }  
 
   }  
 
 }  
 
 </script>  
 
   
 
 <style>  
 
 #app {  
 
   display: flex;  
 
   flex-direction: column;  
 
   align-items: center;  
 
 }  
 
 </style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.

步骤 3: 改进拖拽逻辑

上述代码仅展示了如何开始拖拽和在哪里放置拖拽项。在真实应用中，你可能需要处理拖拽项的排序、更新DOM位置或修改数据模型以反映新的位置。

  • 排序逻辑：你可以使用Vue的数组方法来更新items数组的顺序，以反映拖拽后的排序。
  • 更新DOM位置：通常，在Vue中，我们避免直接操作DOM，而是通过数据绑定来让Vue处理DOM的更新。

注意事项

  • 拖拽API在不同浏览器中的表现可能有所不同，确保在目标浏览器上测试你的应用。
  • 考虑无障碍性（Accessibility），确保拖拽功能对所有用户都是可访问的。
  • 处理拖拽时，注意安全性问题，特别是当拖拽项包含敏感信息时。

以上就是在Vue中实现页面拖拽功能的基本方法。你可以根据具体需求调整和扩展这些代码。