H5 长按 拖拽排序的实现

H5 长按拖拽排序

产品需求: H5页面的一个列表,需要长按之后 然后拖拽排序;

解决方案: 使用 vuedraggable 组件;

vuedraggable是vue生态圈中一个知名的组件,也是vue.js项目中处理拖拽问题的不二法宝;
它基于Sortable.js打造,因此,其功能之强大,配置之丰富,在这里也毋庸赘言了;
由于其供了Sortable.js的所有特性, 所以配置也直接移步Sortable.js文档就可以了

具体方法:

---

安装vuedraggable

    npm i -S vuedraggable

然后就是引入使用,下面代码主要是 配置在H5页面上的长按拖拽 所以要在真机上调试,PC浏览器的模拟器长按拖拽可能会失效

<template>
    <div class="drag-list">
        <draggable v-model="list" :options="options">
            <transition-group>
                <div v-for="item in list" :key="item.id" class="drag-item">
                    {{item.name}}
                </div>
            </transition-group>
        </draggable>
    </div>
</template>

<script>
    import draggable from 'vuedraggable'
    export default {
        data() {
            return {
                list: [
                    {
                        id: '0',
                        name: "Aquamarine",
                    },
                    {
                        id: '1',
                        name: "Hotpink",
                    },
                    {
                        id: '2',
                        name: "Gold",
                    },
                    {
                        id: '3',
                        name: "Crimson",
                    },
                    {
                        id: '4',
                        name: "Blueviolet",
                    }
                ],
                options: {
                    delayOnTouchOnly: true,  //开启触摸延时
                    direction: 'vertical',   //拖动方向
                    delay: 500,              //延时时长
                    touchStartThreshold: 3,  //防止某些手机过于敏感(3~5 效果最好)
                    chosenClass: 'chosen'    //选中之后拖拽项添加的class名(用于选中时候添加样式)
                }
            }
        },
        components: {
            draggable
        }
    }
</script>

<style>
    .drag-list {
        /*防止长按系统默认弹窗*/
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .drag-item {
        margin-bottom: 10px;
        background-color: #eee;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
    .drag-item.chosen{
        background-color: salmon;
    }
</style>