更新记录

1.0.0（2025-12-23）

发布了snap ui

平台兼容性

uni-app(4.87)

其他

介绍

Snap Ui 是一款基于uniapp vue3的一款拖拽排序组件，该组件支持H5、微信小程序拖拽排序，同时支持拖拽元素的增、删、固定，以及触底自动滚动、长按拖拽、API拖拽、单列或多列拖拽等功能，并且具有高自由度、高性能、体积小、无外部依赖等特点。 本组件打包后大小仅有16kb，且无繁杂外部依赖或配置，安装即用。

扫码体验

基本用法

查看文档，基本的拖拽排序代码，复制运行后可直观的看到效果，复杂样式直接自己需求编写item样式即可

长按拖拽

v-model绑定需拖拽集合，columns为集合显示列数，item-height为拖拽元素高度 单位是px，item-margin为元素之间的空隙，custom-class为自定义item的class，同时绑定了@start、@update、@end事件，分别在拖拽开始时、拖拽发生改变时、拖拽结束时触发。

v-model绑定的对象数组内需包含唯一标识，默认为id，如需更换则指定item-key即可。

<template>
    <su-drag
        v-model="dataList"  
        :columns="4" 
        :item-height="100"
        item-margin="2px"
        custom-class="custom-class"
        @start="start"
        @update="update"
        @end="end"
    >
        <template #default={data}>
            {{data.name}}
        </template>
    </su-drag>
</template>
<script setup>
    import { ref, watch } from 'vue';

    const dataList = ref([
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
        {id: 5, name: 'e'},
        {id: 6, name: 'f'},
        {id: 7, name: 'g'},
        ])

    function start(event, index) {
        console.log("start", event, index);
    }
    function update(event, index) {
        console.log("update", event, index);

    }
    function end(event, index) {
        console.log("end", event, index);
    }
</script>
<style lang="scss" scoped>
    :deep() {
        .custom-class {
            background-color: greenyellow;
            text-align: center;
            line-height: 100px;
        }
    }
</style>

API控制拖拽

添加 touch-dragging调整为触摸拖拽，然后可通过 switchDragging()方法可实时控制拖拽的开启与关闭

<template>
    <view style="margin: 10px; display: flex; align-items: center; justify-content: space-around;">
        <text style="font-size: 18px;">API启用/关闭拖拽: </text>
        <button v-if="dragging" type="warn" @click="triggerDrag(false)" size="mini">关闭拖拽</button>
        <button v-else type="primary" @click="triggerDrag(true)" size="mini">开启拖拽</button>
    </view>

    <su-drag ref="sudrag"
        v-model="dataList"  
        :columns="4" 
        :item-height="100"
        item-margin="2px"
        custom-class="custom-class"
        touch-dragging
    >
        <template #default={data}>
            {{data.name}}
        </template>
    </su-drag>
</template>
<script setup>
    import { ref, watch } from 'vue';
    const dragging = ref(false)
    const sudrag = ref(null)

    const dataList = ref([
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
        {id: 5, name: 'e'},
        {id: 6, name: 'f'},
        {id: 7, name: 'g'},
    ])

    function triggerDrag(value) {
        dragging.value = value
        sudrag.value?.switchDragging(value)
    }
</script>
<style lang="scss" scoped>
    :deep() {
        .custom-class {
            background-color: greenyellow;
            text-align: center;
            line-height: 100px;
        }
    }
</style>

固定元素

对象内包含fixed且等于true时，该元素会固定不可拖拽，且不与其他元素交换位置

const dataList = ref([
    {id: 1, name: 'a', fixed: true},
    {id: 2, name: 'b'},
    {id: 3, name: 'c'},
    {id: 4, name: 'd'},
    {id: 5, name: 'e'},
    {id: 6, name: 'f', fixed: true},
    {id: 7, name: 'g'},
])

新增/删除元素

通过deleteItem与addItemAPI删除或新增元素，不可直接增删数组内元素

deleteItem删除元素并非物理删除，只是给删除元素标记了delete: true，如果您的dataList在别处用到时注意过滤

function deleteItem() {
    // sudrag.value?.deleteItem(2)
    sudrag.value?.deleteItem([2, 3])
}

function addItem(){
    sudrag.value?.addItem({id: Math.max(...dataList.value.map(item => item.id)) + 1, name: "新增"})
}

Attributes

Events

Slot

API方法