DndSort 拖拽排序

简介

允许用户通过鼠标拖拽改变数组元素位置。

代码演示

基础演示

DndSort 默认仅提供上下文数据，不会渲染一个容器元素，但可以指定标签名来指定一个元素作为容器，其 move 事件会在拖拽完且位置改变后触发。

DndSortItem 会为每一行数据渲染一个拖拽把手，此组件必须通过 index 属性接收当前行的下标。

<template>
  <co-dnd-sort tag="div" class="flex flex-col gap-3" @move="onMove">
    <co-dnd-sort-item v-for="(item, i) in listData" :key="item.value" :index="i">
      {{ item.label }}
    </co-dnd-sort-item>
  </co-dnd-sort>
</template>

<script lang="ts" setup>
import { arrayMove } from 'cosey/utils';
import { ref } from 'vue';

const listData = ref(
  Array(4)
    .fill(0)
    .map((_, i) => {
      return {
        label: 'label' + i,
        value: 'value' + i,
      };
    }),
);

const onMove = (fromIndex: number, toIndex: number) => {
  arrayMove(listData.value, fromIndex, toIndex);
};
</script>

不同高度

每一个拖拽项的高度可以不一致，但彼此的间隔需要一致，添加间隔的方式任意。

<template>
  <co-dnd-sort tag="div" class="flex flex-col gap-4" @move="onMove">
    <co-dnd-sort-item
      v-for="(item, i) in listData"
      :key="item.value"
      :index="i"
      class="px-2"
      :style="{
        height: item.height,
        border: '1px solid var(--el-border-color)',
      }"
    >
      {{ item.label }}
    </co-dnd-sort-item>
  </co-dnd-sort>
</template>

<script lang="ts" setup>
import { arrayMove } from 'cosey/utils';
import { ref } from 'vue';

const listData = ref(
  Array(4)
    .fill(0)
    .map((_, i) => {
      return {
        height: (i + 1) * 30 + 'px',
        label: 'label' + i,
        value: 'value' + i,
      };
    }),
);

const onMove = (fromIndex: number, toIndex: number) => {
  arrayMove(listData.value, fromIndex, toIndex);
};
</script>

API

DndSortProps

属性	描述	类型	默认值
disabled	是否禁用拖拽	boolean	false
tag	默认情况下，DndSort 不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。	string	-

DndSortSlots

插槽	描述	属性
default	定义默认内容	-

DndSortEmits

事件	描述	类型
move	拖拽完且其位置改变后触发	(fromIndex: number, toIndex: number) => void

DndSortItemProps

属性	描述	类型	默认值
index	拖拽项在列表中的下标，必填	number	-

DndSortItemSlots

插槽	描述	属性
default	定义默认内容	-