更新记录

2.2.3(2023-04-19)

修复自动计算高度问题,添加滚动拖拽功能。

2.1.2(2023-04-18)

修复一些问题,添加使用示例

1.3.5(2023-04-12)

完成第一版基础功能。

查看更多

平台兼容性

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

组件说明(暂不支持vue3)

基于Uniapp中 movable-areamovable-view 开发,可支持多个平台,传入list参数即可实现拖拽排序,而且是双向绑定的,无需其他操作,内置一些常用的参数,可开箱即用。

参数说明

参数 说明 类型 可选值 默认值
value / v-model 绑定值 array - []
column 每行展示数量 number - 3
width 拖拽容器的宽度 string - 100%
height 拖拽容器的高度,若不传则默认根据column和每个盒子的高度自动生成 string auto
itemKey 唯一key,必传 string - -
itemHeight 每个拖拽盒子的高度 string - 100px
direction 可拖拽方向,具体看movable-view string all/vertical/horizontal/none all
damping 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 number - 20

使用实例

index.vue

<template>
    <view class="drag-container">
        <basic-drag v-model="list" itemKey="title" :column="1" itemHeight="40px">
            <template #item="{element}">
                         //注:小程序不能使用插槽这样进行使用,需在BasicDrag里面写入需要展示的item
            <view class="drag-item">{{ element.title }}</view>
            </template>
        </basic-drag>
    </view>
</template>

<script>
import BasicDrag from './basic-drag/basic-drag.vue';
export default {
    components: { BasicDrag },
    data() {
        return {
            list: [{ title: '学习' }, { title: '游戏' }, { title: '自驾' }, { title: '旅游' }, { title: '考公' }],
        };
    },
};
</script>

打赏

如果你觉得本插件,解决了你的问题,可以请作者喝杯咖啡

alipaywechat

隐私、权限声明

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

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

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

许可协议

MIT协议

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