拖拽排序组件 - `IkDragList`

props

vue

<script lang="ts">
  export interface TList {
    label: String
    order?: number
    [key: string]: any
  }
</script>

props	类型	说明	默认值
list	Array as PropType< Array< TList>>	需要排序的数据	[]
group	String	如果一个页面有多个拖拽区域，通过设置group名称可以实现多个区域之间相互拖拽;或者 `{ name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] }`	'draggable'
sort	Boolean	是否开启排序,如果设置为false,它所在组无法排序	true
showIcon	Boolean	前置图标	true
delay	Number	鼠标按下多少秒之后可以拖拽元素	0
touchStartThreshold	Number	鼠标按下移动多少px才能拖动元素	0
disabled	Boolean	是否禁用用拖拽组件	false
animation	Number	拖动时的动画效果，如设置animation=1000表示1秒过渡动画效果	200
handle	String	只有当鼠标在class为mover类的元素上才能触发拖到事件	'.mover'
filter	String	设置了unmover样式的元素不允许拖动	'.unmover'
draggable	String	样式类为item的元素才能被拖动	'.item'
ghostClass	String	设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true	'ghost'
chosenClass	String	被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true	'chosen'
dragClass	String	拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true	'drag'
forceFallback	Boolean	默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true	false
fallbackClass	String	默认false，克隆选中元素的样式到跟随鼠标的样式	'fallback'
fallbackOnBody	Boolean	默认false，克隆的元素添加到文档的body中	false
fallbackTolerance	Number	按下鼠标移动多少个像素才能拖动元素，:fallback-tolerance="8"	8
scroll	Boolean	有滚动区域是否允许拖拽默认true	true
scrollFn	Function	滚动回调函数	`() => { }`
scrollFensitivity	Number	距离滚动区域多远时，滚动滚动条	30
scrollSpeed	Number	滚动速度	30
itemClass	String	数据项样式类	''
groupClass	String	拖拽组件样式类	''
itemStyle	Object	单个数据项的边框圆角弧度值、距离底部的值、背景颜色值	`{ radius: { type: Number, default: 30 }, bottom: { type: Number, default: 8 }, background: { type: String, default: 'var(--ik-sub-sidebar-menu-bg)'}}`

事件

名称	说明	类型
change	拖拽排序结束后触发	`(val: Array<TList>, item: any) => void`

示例代码

vue

<template>
  <!-- 示例 -->
  <IkDragList 
    :list="sortList" 
    :item-style="{ bottom: 4 }" 
    @change="handSortChange" />
</template>

拖拽排序组件 - IkDragList ​

props ​

事件 ​

示例代码 ​

拖拽排序组件 - `IkDragList`

props

事件

示例代码