vue3中使用vuedraggable实现拖拽

包安装方式

yarn add vuedraggable@next
npm i -S vuedraggable@next

属性说明

如果下面的属性说明未能完全看明，可以看左边的对应的菜单查看详细说明和例子。

完整例子

<template><div class="itxst"><div><draggable:list="state.list"ghost-class="ghost"chosen-class="chosenClass"animation="300"@start="onStart"@end="onEnd"><template #item="{ element }"><div class="item">{{ element.name }}</div></template></draggable></div><div>{{ state.list }}</div></div>
</template>
<script setup>
import { ref, reactive } from "vue";
import draggable from "vuedraggable";
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const state = reactive({//需要拖拽的数据，拖拽后数据的顺序也会变化list: [{ name: "www.itxst.com", id: 0 },{ name: "www.baidu.com", id: 1 },{ name: "www.google.com", id: 2 },],
});//拖拽开始的事件
const onStart = () => {console.log("开始拖拽");
};//拖拽结束的事件
const onEnd = () => {console.log("结束拖拽");
};
</script>
<style scoped>
.itxst {width: 600px;display: flex;
}
.itxst > div:nth-of-type(1) {flex: 1;
}
.itxst > div:nth-of-type(2) {width: 270px;padding-left: 20px;
}
.item {border: solid 1px #eee;padding: 6px 10px;text-align: left;
}.item:hover {cursor: move;
}
.item + .item {margin-top: 10px;
}
.ghost {border: solid 1px rgb(19, 41, 239);
}
.chosenClass {background-color: #f1f1f1;
}
</style>

如果报 missing required prop： “itemKey”

draggable加上属性

 item-key="id"

文档:vue.draggable.next 中文文档
参考文档：vue3中使用vuedraggable