更新记录

1.2.8（2024-09-04） 下载此版本

新增supportLongpress属性

1.2.7（2024-09-04） 下载此版本

新增slotContentStyle属性

1.2.6（2024-08-29） 下载此版本

更新了文档

平台兼容性

uni-app

uni-app x

拖拽列表

可自动排序拖拽，或者脱至指定下标进行指定换位

leo-drag 拖拽排序 说明

基于uniapp vue3,使用了movable-area和movable-view内置组件实现移动和过度动画，兼容APP-VUE、H5、MP-WEIXIN。

gitee地址：https://gitee.com/lizt816/leo-drag

安装

uni-app插件市场链接 —— https://ext.dcloud.net.cn/plugin?id=19587

简单DOM，更多请看下方API

• 提供简单的使用示例，更多请查看下方的demo

    <!-- 如果使用v-model传递list，则拖动完毕自动更新数据位置，否则使用@getList事件获取到最新拖动的值 -->
    <leo-drag :column="3" ref="myDrop" @getList="getDropList" v-model:list="dragAndDrop">
        <template #content={data}>
            <!-- 根据data.activeIndex 判断是否为当前拖动的元素，自定义添加样式 -->
            <view class="drop" :style="[{'transform':data.index === data.activeIndex?'scale(1.05)':'scale(1)',}]">
                <view class="flex flex-center" style="background-color: aqua;">
                    <view class="ellipsis">
                        {{data.name}}123456789123456789123456789
                    </view>
                    <uni-icons class="flex-none" @touchstart="touchstart(data.index)" style="margin-left: auto;" type="bars" size="30"></uni-icons>
                </view>
            </view>
        </template>
    </leo-drag>

export default {
    data() {
        return {
            dragAndDrop:[  // 列表数据
                {name:"元素1"},
                {name:"元素2"},
                {name:"元素3"},
                {name:"元素4"},
                {name:"元素5"},
                {name:"元素6"},
                {name:"元素7"},
            ],
        }
    },
    methods:{
        getDropList(list){
            // 拖拽完毕后获取到的数据
            console.log(list,"eeee")
        },
        touchstart(i){
            // 默认是长按才能拖动，可根据需求，通过触摸拖动元素
            this.$refs.myDrop.handleLongpress(i);
        },
        changeList(){
            // 如果新增或者删除了数据，请调用此函数
            let list = this.dragAndDrop; 
            this.$refs.myDrop.initList(list,true);
        }
    }
}

增删

• 因为传递数据和组件数据进行了区分。
• 所以无论是添加或者删除，都需要调用this.$refs.myDrop.initList(list,true)方法重置列表。
• 保证数据的统一性

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/leo-drag/compoents/leo-drag -->
<leo-drag />

API

Props

Events

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。