文档
官方网站
https://github.com/SortableJS/vue.draggable.next
中文文档
vue3: https://www.itxst.com/vue-draggable-next/tutorial.html
vue2: https://www.itxst.com/vue-draggable/tutorial.html
安装
# NPM
$ npm i -S vuedraggable@next
# Yarn
$ yarn add vuedraggable@next
# pnpm
$ pnpm i -S vuedraggable@next
导入
import Draggable from "vuedraggable";
组件封装实例
Draggable组件封装(vue3版)
<script lang="ts" setup>
import { ref, watch } from "vue";
import Draggable from "vuedraggable";
const props = defineProps({
dragList: {
type: Array,
default() {
return [];
}
},
icons: {
type: String,
default: ""
},
hideIcons: {
type: Boolean,
default: true
}
});
const dragList = ref([]) as any;
const drag = ref(false);
const emit = defineEmits(["dragList"]);
function updateDrag() {
emit("dragList", dragList.value);
}
watch(
() => props.dragList,
val => {
dragList.value = val;
},
{
deep: true,
immediate: true
}
);
</script>
<template>
<div>
<Draggable
:list="dragList"
@update="updateDrag"
@start="drag = true"
@end="drag = false"
v-bind="{ animation: 400 }"
itemKey="index"
>
<template #item="{ element, index }">
<div>
<el-card shadow="hover">
<div class="flex items-start">
<!-- 图标 -- >
<img :src="props.icons" v-show="props.hideIcons"/>
<slot :item="element" :index="index" />
</div>
</el-card>
</div>
</template>
</Draggable>
</div>
</template>
引用组件
<script setup lang="ts">
import Draggable from './Draggable.vue'
const list =[{
num:1
},{
num:2
},{
num:3
},{
num:4
}]
function deleteItem(index){
list.value.splice(index,1)
}
</script>
<template>
<div class="wrapper">
<Draggable :dragList="list">
<template #default="element">
<div v-for="(item, idx) in element" :key="idx">
<p>{{item.num}}</p>
<el-button @click="deleteItem(element.index)">删除</el-button>
</div>
</template>
</Draggable>
</div>
</template>