官方文档

安装

1
2
3
yarn add vuedraggable@next

npm i -S vuedraggable@next

使用

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
<template>
  <draggable
    :list="state.form_list"
    ghost-class="ghost"
    :force-fallback="true"
    chosen-class="chosenClass"
    animation="200"
    @start="onStart"
    @end="onEnd"
  >
    <template #item="{ element, index }">
      <div class="item_box">{{ element }}{{ index }}</div>
    </template>
  </draggable>
</template>
<script setup lang="ts">
import draggable from "vuedraggable";
import { reactive, onMounted } from "vue";

const state = reactive({
  form_list: [{ title: "肯德基" }, { title: "麦当劳" }],
});
//开始拖拽事件
const onStart = () => {};
//结束拖拽事件
const onEnd = () => {};
onMounted(() => {});
</script>
<style lang="less" scoped></style>

示例