更新记录
1.0.2(2021-09-02)
增加固定列表,可以固定在任意位置
1.0.1(2021-08-10)
优化使用方法,外部传入slot
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
更新额外列表,可以固定在任意位置
插件预览
![QQ20210810-115015](https://gitee.com/evilstorm/u-pic/raw/master/uPic/2021-08-10/QQ20210810-115015-12-04-CBjpLy.gif)
使用说明
- 外部使用
<template>
<DragSorts
@change="sortChange"
@click="click"
@del="moduleDel"
:viewWidth="646 / 2"
:row="5"
:disabled="!editing"
:list="list"
:extraNodes="extraList"
>
<template v-slot:rowContent="{ row, disabled }">
<view @click="click(row)" class="item">
<image
class="itemImg"
:src="row.icon"
mode="aspectFit|aspectFill|widthFix"
>
</image>
<text class="itemName">{{ row.name }} </text>
<view class="itemDel" @click.stop="moduleDel(row)" v-if="disabled">
<image
src="/static/delete.png"
mode="aspectFit|aspectFill|widthFix"
>
</image>
</view>
</view>
</template>
</DragSorts>
</template>
-
参数列表
参数名 |
默认值 |
说明 |
list |
[] |
需要拖拽的项目列表 |
extraNodes |
[] |
额外的内容列表 |
row |
5 |
每行元素个数 |
height |
80 |
单个元素高度 |
viewWidth |
313 |
拖拽元素区域宽度,用于位置计算 |
disabled |
true |
是否禁用拖拽生效(常用于拖拽开关) |
animate |
false |
是否开启抖动动画 |
-
额外列表参数
参数名 |
默认值 |
说明 |
type |
'' |
before after destAfter destBefore |
index |
0 |
destAfter和destBefore类型下的对应位置 |