基础使用

vue-draggable-plus指南-教程

本文将介绍 vue-draggable-plus 基础使用方式，包含单个列表的拖拽排序以及数据的双向绑定。通过以下三种方式，您可以根据实际需求选择最合适的实现方案。

本教程中的示例源码可在 /demo/basic/ 目录下找到对应的 .vue 文件。

简介

vue-draggable-plus 支持组件、函数和指令三种调用方式，均能实现拖拽排序功能。以下是它们各自的特点：

组件使用：适合模板化开发，将拖拽逻辑封装在组件内部。
函数使用：适合在脚本中动态控制，逻辑更为灵活。
指令使用：适合在已有 DOM 元素上快速添加拖拽能力。

组件使用

通过引入组件并在模板中包裹列表元素，即可快速实现拖拽排序功能。组件内部会处理拖拽事件与数据更新，您只需通过 v-model 绑定列表数据。

vue 复制代码

<template>
  <button @click="start">start</button>
  <button @click="pause">pause</button>
  <button @click="disabled = true">disabled</button>
  <div class="flex">
    <VueDraggable
      ref="el"
      v-model="list"
      :disabled="disabled"
      :animation="150"
      ghostClass="ghost"
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
      @start="onStart"
      @update="onUpdate"
      @end="onEnd"
    >
      <div
        v-for="item in list"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  type DraggableEvent,
  type UseDraggableReturn,
  VueDraggable
} from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

const el = ref<UseDraggableReturn>()
const disabled = ref(false)
function pause() {
  el.value?.pause()
}

function start() {
  el.value?.start()
}

const onStart = (e: DraggableEvent) => {
  console.log('start', e)
}

const onEnd = (e: DraggableEvent) => {
  console.log('onEnd', e)
}

const onUpdate = () => {
  console.log('update')
}
</script>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

函数使用

若您更倾向于在 JavaScript 中处理逻辑，可以使用函数方式。通过传入列表元素和数据对象，函数将自动绑定拖拽事件，并提供更细粒度的控制能力。

vue 复制代码

<template>
  <button @click="start()">start</button>
  <div class="flex">
    <div
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
      ref="el"
    >
      <div
        v-for="item in list"
        :key="item.id"
        class="h-30 bg-gray-500/5 rounded p-3 cursor-move"
      >
        {{ item.name }}
      </div>
    </div>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
const el = ref()

const { start } = useDraggable(el, list, {
  animation: 150,
  ghostClass: 'ghost',
  onStart() {
    console.log('start')
  },
  onUpdate() {
    console.log('update')
  }
})
</script>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

指令使用

指令方式允许您在不改变原有 DOM 结构的情况下，通过 v-draggable 指令为任意列表元素添加拖拽排序功能，实现最为简洁。

vue 复制代码

<template>
  <div class="flex">
    <ul
      v-draggable="[
        list,
        {
          animation: 150,
          ghostClass: 'ghost',
          onUpdate,
          onStart
        }
      ]"
      class="target-directive flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
    >
      <li
        v-for="item in list"
        :key="item.id"
        class="h-30 bg-gray-500/5 rounded p-3 cursor-move"
      >
        {{ item.name }}
      </li>
    </ul>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

function onStart() {
  console.log('start')
}

function onUpdate() {
  console.log('update')
}
</script>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

请根据您的项目场景选择合适的使用方式。更多高级配置，如拖拽限制、动画效果及事件监听，请参阅后续章节。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。