更新记录

2.2.3（2023-04-19） 下载此版本

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

2.1.2（2023-04-18） 下载此版本

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

1.3.5（2023-04-12） 下载此版本

完成第一版基础功能。

平台兼容性

组件说明（暂不支持vue3）

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

参数说明

使用实例

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>

打赏

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