vue3实现拖拽效果 (vuedraggable)

效果图

使用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>