DraggableItem 单列拖拽

DraggableItem 单列拖拽 的基础用法、公开 API 与示例。

基础示例

拖动单列任务调整顺序。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { DraggableItem } from "@/components/page/draggable-item";

const list = ref([
  { id: "1", name: "材料清单", owner: "采购组" },
  { id: "2", name: "报价审核", owner: "成本组" },
  { id: "3", name: "合同归档", owner: "项目组" },
]);
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <DraggableItem title="可拖拽任务" title-bg-color="#2f6bff" :list="list">
        <template #content="{ item }">
          <div class="drag-card">
            <strong>{{ item.name }}</strong>
            <span>{{ item.owner }}</span>
          </div>
        </template>
      </DraggableItem>
    </div>
  </ClientOnly>
</template>

<style scoped>
.drag-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drag-card span {
  color: #667085;
  font-size: 13px;
}
</style>

隐藏源代码

禁用拖拽

展示只读排序列表，适合流程已锁定的场景。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { DraggableItem } from "@/components/page/draggable-item";

const list = ref([
  { id: "1", name: "需求确认" },
  { id: "2", name: "成本核算" },
  { id: "3", name: "经理审批" },
]);
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <DraggableItem title="已锁定流程" title-bg-color="#667085" :list="list" disabled>
        <template #content="{ item }">
          <div class="readonly-drag-item">{{ item.name }}</div>
        </template>
      </DraggableItem>
    </div>
  </ClientOnly>
</template>

<style scoped>
.readonly-drag-item {
  color: #475467;
}
</style>

隐藏源代码

引入方式

import { DraggableItem } from "@/components/page/draggable-item";

Props

参数	说明	类型	默认值	必填
title	标题	string	"header"	否
list	数据列表	DragItemList[]	[]	否
titleBgColor	标题背景色	string	""	否
titleClass	标题元素 class	string	""	否
dragClass	拖拽元素 class	string	""	否
disabled	是否禁用拖拽	boolean	false	否
animation	动画	number	200	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
title	标题内容插槽。	-
content	主体内容插槽。	item

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
DraggableItem	导出 DraggableItem 供业务侧复用。	useInstall(index)

Types

DraggableItemProps

导出 DraggableItemProps 供业务侧复用。

字段	说明	类型	默认值	必填
title	标题	string	-	否
list	数据列表	DragItemList[]	-	否
titleBgColor	标题背景色	string	-	否
titleClass	标题元素 class	string	-	否
dragClass	拖拽元素 class	string	-	否
disabled	是否禁用拖拽	boolean	-	否
animation	动画	number	-	否

DragItemList

导出 DragItemList 供业务侧复用。

字段	说明	类型	默认值	必填
id	配置 id。	string	-	是
name	配置 name。	string	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。