在Vue 2中构建一个拖拽式页面，你可以使用第三方库如vuedraggable，它是基于Sortable.js的一个Vue组件，非常适合用于实现拖拽功能。
步骤 1: 安装vuedraggable
首先，你需要安装vuedraggable。在你的Vue项目中，运行以下命令：
npm install vuedraggable
或者使用yarn：
yarn add vuedraggable
步骤 2: 在Vue组件中使用vuedraggable
在你的Vue组件中，你可以这样使用vuedraggable：
<template><div><draggable v-model="list" @start="drag=true" @end="drag=false"><div v-for="item in list" :key="item.id">{{ item.name }}</div></draggable></div>
</template><script>
import draggable from 'vuedraggable';export default {components: {draggable,},data() {return {list: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' },],drag: false, // 控制拖拽时的状态，可选};},
};
</script>
步骤 3: 自定义拖拽行为（可选）
你可以通过监听vuedraggable的特定事件来自定义拖拽行为，例如：
<template><draggable v-model="list" @start="onDragStart" @end="onDragEnd"><div v-for="item in list" :key="item.id">{{ item.name }}</div></draggable>
</template><script>
import draggable from 'vuedraggable';export default {components: {draggable,},data() {return {list: [/* ... */],};},methods: {onDragStart() {console.log('Drag started');},onDragEnd() {console.log('Drag ended');},},
};
</script>
步骤 4: 配置vuedraggable选项（可选）
vuedraggable还支持多种配置选项，例如设置拖拽的动画效果、分组拖拽等。你可以在组件上使用group属性来实现分组拖拽：
<draggable v-model="list" :group="{ name: 'items', pull: 'clone', put: false }"><!-- items -->
</draggable>
这里，group属性设置了拖拽的组名称为items，pull: 'clone’表示可以克隆元素进行拖拽，put: false表示不允许将元素放入当前列表。更多配置选项可以在Sortable.js的文档中找到。
结论
通过以上步骤，你可以在Vue 2中轻松实现一个拖拽式页面。vuedraggable提供了丰富的API和配置选项，可以满足大多数拖拽需求。如果你需要更复杂的拖拽逻辑或者样式定制，可以进一步探索和利用这些功能。