效果图
使用vuedraggable 实现拖拽真的是特别丝滑和简单！！
下载
这里是vue3版本的 对应vuedraggable版本 4.1.0 不要下错了！！！
npm install vuedraggable@4
pnpm add vuedraggable@4
官网
https://github.com/SortableJS/Vue.Draggable
中文网
https://www.itxst.com/vue-draggable/tutorial.html
特别注意
常见报错 :Item slot must have only one child
就是插槽中只能有一个子项 （包括注释 ）
<template #item="{element, index}">
<!-- 如果你在这加个注释必报错 注释也算子项 -->
<div class="eachLine">
<!-- 这里去写其他的 -->
</div>
</template>
使用
<template>
<!-- handle 如果没有这个属性就是代表点击子项任意一个都能拖拽
加了这个属性就代表只能对应类名的元素才能拖拽 -->
<draggable item-key="id" v-model="_list" :component-data="{tag: 'div', type: 'transition-group'}"
handle=".dragAndDrop" v-bind="dragOption">
<!-- element表示的是每一个子项 如果是vue2版本的话就是循环了 -->
<template #item="{element, index}">
<div class="eachLine">
<!-- 这个就是对应的小拖拽图标了 -->
<span class="dragAndDrop" ><el-icon><Rank/></el-icon></span>
<!-- 这个是我定义的样式组件了 删掉 直接用你自己的就行 如果想要样式的私信我就行-->
<FieldItem :item="element" @deleteField="deleteField"/>
</div>
</template>
</draggable>
</template>
<script setup lang="ts">
// 引入lodash 排序
import {sortBy} from "lodash";
// 引入组件
import draggable from 'vuedraggable'
function guid(complex = true) {
const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
return S4() + S4() + '' + parseInt(String(new Date().getTime() / 1000))
}
const dragOption = {
animation: 300,//动画速度运动
sort: true,// 内部拖动排序列表
// guid 是我定义的一个随机生成永远不会有重复值的方法 类似于uuid 可以不加
// 如果有两个draggable 组件 他们的group名字是一样的就可以相互拖拽 名字不一样就不能相互拖拽了
group: guid() + 'option'
//拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如group都为option的组之间可以相互拖动，本文例子中A列和B列可以相互拖动，但是无法拖到C列。
}
// 因为后端穿来的字段是有他自己顺序的 他不好改 咱们就用fieldOrder这个字段进行字段排序
// 当然这里完全可以用自己的列表 const list = ref([{id:1},{id:2}])
const _list = computed({
get() {
let arr = props.list?.filter(item => fieldTypeEnumMap[item.fieldType])
return sortBy(arr, 'fieldOrder')
},
set(value: any) {
value?.forEach?.((item, index) => {
item.fieldOrder = index
})
emit('setList', value)
}
})
</script>
常用钩子
@end @start
<draggable item-key="id" v-model="_list" :component-data="{tag: 'div', type: 'transition-group'}" v-bind="dragOption"
@end='doGroupSort' @start='startHandle'>
<template #item="{element, index}">
<div> <!-- 主体 --></div>
</template>
</draggable>
<script setup lang="ts">
// 引入组件
import draggable from 'vuedraggable'
const dragOption = {
animation: 300,//动画速度运动
sort: true,// 内部拖动排序列表
group: 'option'
}
const doGroupSort=()=>{
//拖拽结束会发生什么事情 有时候后端让处理参数或者啥的就在这处理
}
const startHandle =()=>{
// 拖拽开始会发生啥
}
</script>