Vue 的拖拽功能可以使用 vue-draggable 库实现。它是一个基于 Vue.js 的拖拽组件,支持拖拽列表、拖拽表格等多种类型的元素。
要在 Vue 项目中使用 vue-draggable,需要先通过 npm 安装,然后在 main.js 文件中导入并使用:
npm install vue-draggable
import Vue from 'vue'
import VueDraggable from 'vue-draggable'
Vue.use(VueDraggable)
然后,在 Vue 组件中,我们可以使用 v-draggable 指令来创建拖拽元素:
<template>
<draggable v-model="list">
<div v-for="item in list" :key="item.id">{{ item.text }}</div>
</draggable>
</div>
</template>
<script>
export default {
data () {
return {
list: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' }
</script>
这样,就可以实现拖拽到指定位置了。