更新记录

1.0.2(2021-09-02)

增加固定列表,可以固定在任意位置

1.0.1(2021-08-10)

优化使用方法,外部传入slot


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

更新额外列表,可以固定在任意位置

插件预览

QQ20210810-115015

使用说明

  1. 外部使用
<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>
  1. 参数列表

    参数名 默认值 说明
    list [] 需要拖拽的项目列表
    extraNodes [] 额外的内容列表
    row 5 每行元素个数
    height 80 单个元素高度
    viewWidth 313 拖拽元素区域宽度,用于位置计算
    disabled true 是否禁用拖拽生效(常用于拖拽开关)
    animate false 是否开启抖动动画
  2. 额外列表参数

    参数名 默认值 说明
    type '' before after destAfter destBefore
    index 0 destAfter和destBefore类型下的对应位置

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问