vue拖拽到指定位置

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>

这样,就可以实现拖拽到指定位置了。

  •