更新记录

3.1.0（2021-05-17）

1.上个版本再发布的时候把@longtap事件错写成@tap事件了，导致无法运行！

2.修复了在iOS中拖动元素时页面一起跟着被拖动！

3.0.0（2021-05-08）

APP 和 微信小程序测试没问题 其他平台没测试

2.0.0（2021-05-07）

修复拖拽后重叠问题， 兼容各平台

平台兼容性

预览图

组件说明

该组件只是简单封装了拖动排序功能。

该组件是@longtap事件长按触发拖动，如需直接拖动排序请自行在组件中更改为@touchstart事件。

该组件在APP和微信小程序正常运行，其他平台没有测试。

属性说明

使用示例

页面：

<template>
    <drag-list
        v-if="currentView == 'drag-list'"
        :itemHeight="itemHeight" 
        :list="list" 
        @change="sortChange">
        <template slot-scope="{ item }">
            <view class="drag-item">
                <uni-icons type="checkbox" size="28" class="item-icon"></uni-icons>
                <view style="padding: 13rpx 0;">
                    <h1 style="font-size: 30rpx;margin: 0;">{{ item.text }}</h1>
                    <p style="font-size: 26rpx;margin: 0;">{{ item.text }}</p>
                </view>
            </view>
        </template>
    </drag-list>
</template>

<style lang="scss" scoped>
    //scoped 在当前页生效 不影响子组件
    .drag-item{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .item-icon{
        position: absolute;
        left: 10px;
        display: inline-block;
        line-height: 70px;
        color: #FF5500;
    }
</style>

script:

<script>
    import dragList from '../components/drag-list.vue';
    export default {
        components: {
            dragList
        },
        data() {
            return {
                list: [
                    {text: 'Senior Product Designer0'},
                    {text: 'Senior Animator1'},
                    {text: 'Visual Designer2'},
                    {text: 'Computer Engineer3'}
                ],
                itemHeight: 120,
            }
        },
        methods: {
            sortChange(list){
                console.log(list)
            },
        },
    }
</script>