Drag 拖拽排序

以列表或网格展示数据，允许用户拖动调整顺序。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 单列拖拽列表 -->
<fui-drag :itemList="items" :itemHeight="100" @end="handleDragEnd" />

在页面提供 items，默认数据字段为 text、src。在 handleDragEnd 中读取返回的 itemList 保存顺序。

属性

属性	类型	说明	官网默认值
itemList	Array	列表数据	[]
textKey	String	文本字段	text
srcKey	String	图片字段	src
width	Number / String	列表宽度，0 使用屏幕宽度，单位 rpx	0
columns	Number / String	列数	1
itemHeight	Number / String	非正方形时项目高度，单位 rpx	0
square	Boolean	项目是否为正方形	false
styles	Object	非自定义模式的项目样式	{}
isMenu	Boolean	标题分组样式是否显示菜单图标	true
scrollTop	Number	初始页面滚动距离，单位 px	0
isDrag	Boolean	是否允许拖动	true
custom	Boolean	是否自定义项目内容	false

事件

事件	说明	回调参数
change	拖动顺序变化	{ itemList }
end	拖动结束	{ itemList }
click	点击项目	{ index, item }
delete	点击删除图标	{ index }

custom 为 true 时默认作用域插槽提供 model、width、height、index；字节小程序不支持自定义插槽。

插槽

插槽	说明
default	custom 为 true 时自定义拖拽项内容