更新记录

1.0.0（2026-02-03） 下载此版本

自定义插槽，拖拽自由，

平台兼容性

uni-app(4.86)

cll-drag拖拽 ，自定义插槽内容，新增/删除一行 ，获取排序后数组，设置容器高度

使用方法，

<cll-drag ref="dragSortRef" 
containerHeight="1000rpx"
  :itemHeight='110'  
:showIndex="showIndex" 
:list-data="taskList"
 item-key="id"
    display-key="name" :showDragHandle="showHand">
    <template #item="{ item, index }">
        <!-- 自定义内容 -->
        <view class="custom-item" v-if="item.id===2">
            <view class="title">自定义内容</view>
            <view class="titleId">{{ item.id }}</view>
        </view>
        <!-- 自定义内容 -->
    </template>

</cll-drag>

暴露属性

showDragHandle 是否显示拖拽手柄 默认 true

showIndex 是否显示序号 默认 true

itemHeight 容器高度 默认 600rpx

itemHeight 项目item高度（px） 默认 100

暴露方法

排序后的数组 const items = dragSortRef.value.getSortedItems()

    const exportOrder = () => {
        if (dragSortRef.value) {
            const items = dragSortRef.value.getSortedItems()
            uni.showModal({
                title: '当前排序结果',
                content: `排序ID: ${JSON.stringify(items)}`,
                showCancel: false,
                confirmText: '确定'
            })
            console.log(items, 'items')

        }
    }

新增一行 const items = dragSortRef.value.addItem(item)

    const addiItem = () => {
    const length = dragSortRef.value.getSortedItems().length
    const item = {
        id: length + 1,
        name: '新增任务'
    }
    dragSortRef.value.addItem(item)
}

删除一行

    const removeItem = (id : any) => {
    if (id) {
        dragSortRef.value?.removeItem(id)
    } else {
        // 删除最后一项
        const items = dragSortRef.value.getSortedItems()
        console.log(items,123)
        if (items.length > 0) {
            const lastItem = items[items.length - 1]
            dragSortRef.value?.removeItem(lastItem.id)
        }
    }
}