Drag 拖拽排序 
概述
Drag 拖拽排序，通过拖动列表元素以此来达到对数据的重新排列。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
由于Nvue端目前无法灵活的调整z-index值，且Android端超出宽高范围内容会强制隐藏，所以体验没vue端好，建议在.vue下使用组件。
字节小程序不支持自定义元素。
该组件暂不支持嵌套在 Drawer 类组件中使用。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiDrag from "@/components/firstui/fui-drag/fui-drag.vue"
export default {
components:{
fuiDrag
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
图片元素
通过 width 属性设置总宽度，itemList 属性设置拖拽数据， columns 属性设置每行显示列数，square 属性设置item项是否显示为正方形，即高度与宽度相等，styles 属性设置内容样式 。
<fui-drag :width="720" :itemList="itemList" :columns="4" square :styles="styles" @end="end"></fui-drag>
1
export default {
data() {
return {
itemList: [{
id: 1,
src: '/static/images/common/logo.png'
}, {
id: 2,
src: '/static/images/common/img_logo.png'
}, {
id: 3,
src: '/static/images/qrcode/h5_qrcode.png'
}, {
id: 4,
src: '/static/images/qrcode/toutiao_qrcode.png'
}, {
id: 5,
src: '/static/images/qrcode/qq_qrcode.jpg'
}, {
id: 6,
src: '/static/images/qrcode/wx_qrcode.jpg'
}, {
id: 7,
src: '/static/images/qrcode/baidu_qrcode.png'
}, {
id: 8,
src: '/static/images/qrcode/ali_qrcode.png'
}, {
id: 9,
src: '/static/images/common/logo.png'
}, {
id: 10,
src: '/static/images/common/img_logo.png'
}],
styles: {
padding: 4
}
}
},
methods: {
end(e){
//排序后列表
console.log(e.itemList)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
自定义元素
通过 width 属性设置总宽度，custom 属性设置是否为自定义元素，itemList 属性设置拖拽数据， columns 属性设置每行显示列数，itemHeight 属性设置item项高度 。
<fui-drag :width="680" custom :itemList="itemList" :columns="4" :itemHeight="200" @end="end">
<template v-slot="{ model,width,height, index }">
<view class="fui-item" :style="{width:width+'px',height:height+'px'}">
<image :src="model.src" class="fui-img"></image>
<text class="fui-text">{{model.text}}</text>
</view>
</template>
</fui-drag>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
export default {
data() {
return {
itemList: [{
id: 1,
text: '微信小程序',
src: '/static/images/qrcode/wx_qrcode.jpg'
}, {
id: 2,
text: '支付宝小程序',
src: '/static/images/qrcode/ali_qrcode.png'
}, {
id: 3,
text: '头条小程序',
src: '/static/images/qrcode/toutiao_qrcode.png'
}, {
id: 4,
text: '百度小程序',
src: '/static/images/qrcode/baidu_qrcode.png'
}, {
id: 5,
text: 'QQ小程序',
src: '/static/images/qrcode/qq_qrcode.jpg'
}, {
id: 6,
text: 'H5',
src: '/static/images/qrcode/h5_qrcode.png'
}, {
id: 7,
text: 'IOS',
src: '/static/images/common/logo.png'
}, {
id: 8,
text: 'Android',
src: '/static/images/common/img_logo.png'
}]
}
},
methods: {
end(e) {
//排序后列表
console.log(e.itemList)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.fui-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
flex-direction: column;
}
.fui-img {
width: 120rpx;
height: 120rpx;
margin-bottom: 12rpx;
border-radius: 16rpx;
pointer-events: none;
}
.fui-text {
font-size: 24rpx;
color: #999;
font-weight: normal;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 自定义item项内容，需要将custom属性设为true，字节小程序不支持 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| itemList | Array | 拖拽列表数据 | [ ] | - |
| width | Number, String | 拖拽列表宽度，为0时使用屏幕宽度，单位rpx | 0 | - |
| columns | Number, String | 每行显示个数（列数） | 1 | - |
| itemHeight | Number, String | item项高度，square为false时必传（square为true时失效），单位rpx | 0 | - |
| square | Boolean | item项是否以正方形显示，为true时itemHeight失效 | false | - |
| styles | Object | item项内容样式，custom为false时有效，具体属性内容见下方说明 | { } | - |
| scrollTop | Number | 初始化时，页面滚动高度，单位px | 0 | - |
| isDrag | Boolean | 是否可拖拽 | true | - |
| custom | Boolean | 是否自定义item项内容 | false | - |
//styles 属性说明（非自定义item项内容时有效），不传值则使用默认值
{
//item项类型，可选值：1-图片元素，2-标题分组元素
type: 1,
//item项padding值，单位rpx
padding: 0,
//item项背景色
background: "#fff",
//字体大小，单位rpx，type=2时有效
size: 30,
//字体颜色，type=2时有效
color: '#181818',
//是否显示删除图标
isDel: false,
//删除图标颜色
delColor: '#FF2B2B',
//slide图标颜色，type=2时有效
slideColor: '#B2B2B2'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 拖动变化时触发 | { itemList:改变后的list列表 } |
| @end | 拖动结束时触发 | { itemList:改变后的list列表 } |
| @click | item项点击时触发 | { index：点击项索引值， item：索引对应item项数据 } |
| @delete | 点击item项删除图标时触发 | { index：点击项索引值 } |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。