更新记录

1.0.3（2026-03-23） 下载此版本

修改示例，自定义内容

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

自定义插槽，拖拽自由，

平台兼容性

uni-app(4.86)

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

使用方法，

   <cll-drag
      :list-data="taskList"
      item-key="id"
      display-key="name"
      custom-flag-key="isCustom"
    >
      <template #item="{ item, index }">
        <!-- 这里只负责画“自定义行”的内容 -->
        <view style="color: red">
          自定义内容：{{ index + 1 }} - {{ item.text }}
        </view>
      </template>
    </cll-drag>
    const taskList = ref([
  {
    id: 1,
    name: "开发任务",
  },
  {
    id: 2,
    name: "设计任务",
  },
  {
    id: 3,
    name: "测试任务",
    isCustom: true, // 自定义标记
  },
  {
    id: 4,
    name: "临时任务",
  },
]);

暴露属性

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)
        }
    }
}