Vue3使用拖拽插件 - vuedraggable

1. 安装

pnpm i -S vuedraggable@next

2. 导入

import draggable from "vuedraggable";

3. 基本使用

<draggable
	:list="dragList"
	item-key="id"
    ghost-class="_ghost"
    chosen-class="_chosenClass"
    animation="300"
    >
    	<template #item="{ element }">
       		<div class="_drag-item">
          		{{ element.name }}
        	</div>
      	</template>
</draggable>

参数说明：

• list：绑定数据
• item-key： 用于指定每一项唯一的标识
• ghost-class：设置拖动元素的占位符类名
• chosen-class：设置被选中目标的样式
• animation：拖动时的动画效果

更多用法参考vuedraggable 中文网

4. 完整示例-复制即可使用

<template>
  <!-- 上下拖动 -->
  <div class="up-down">
    <draggable
      item-key="id"
      :list="dragList"
      ghost-class="_ghost"
      chosen-class="_chosenClass"
      animation="300"
    >
      <template #item="{ element }">
        <div class="_drag-item">
          {{ element.name }}
        </div>
      </template>
    </draggable>
  </div>
</template>

<script lang="ts" setup name='DragUpDown'>
import { Ref, watchEffect } from "vue";
import draggable from "vuedraggable";

interface DragListDataModel {
  id: number,
  name: string
}

interface DragPropsDataModel {
  modelValue: Array<{
    id: number
    name: string
  }>
}

const props = defineProps<DragPropsDataModel>()

// 这里的数据供调试使用，亦可从外部传入数据配合watchEffect使用
const dragList: Ref<DragListDataModel[]> = ref([
	{id: 1, name: '看万山红遍，层林尽染；漫江碧透，百舸争流。'} 
	{id: 3, name: '怅寥廓，问苍茫大地，谁主沉浮？'}
	{id: 0, name: '独立寒秋，湘江北去，橘子洲头。'}
	{id: 2, name: '鹰击长空，鱼翔浅底，万类霜天竞自由。'}
	{id: 4, name: '携来百侣曾游，忆往昔峥嵘岁月稠。'}
	{id: 5, name: '恰同学少年，风华正茂；书生意气，挥斥方遒。'}
	{id: 6, name: '指点江山，激扬文字，粪土当年万户侯。'}
	{id: 7, name: '曾记否，到中流击水，浪遏飞舟？'}
])

watchEffect(() => {
  if (props.modelValue.length > 0) {
    dragList.value = props.modelValue
  }
})
</script>

<style lang="scss" scoped>
._drag-item {
  border: solid 1px #eee;
  padding: 6px 10px;
  text-align: left;
}

._drag-item:hover {
  cursor: move;
}
._drag-item + ._drag-item {
  margin-top: 10px;
}
._ghost {
  border: solid 1px rgb(19, 41, 239);
}
._chosenClass {
  background-color: #f1f1f1;
}
</style>

5. 最终效果