`<DndItem>`

<DndItem> 组件是一个可以支持拖拽和放置的组件，适用于实现拖拽交互功能。它允许用户通过自定义的拖拽数据和方向控制，实现丰富的拖拽体验。

参数

id (String):
- 拖拽项目的唯一标识符，用于标识每个拖拽项。
- 示例: "id1"
item (Object):
- 拖拽项目的数据对象，包含拖拽项的具体信息。
- 示例: { name: 'Item 1', value: 100 }
type (String):
- 拖拽类型，用于区分不同的拖拽操作，通常用于处理多种拖拽交互的场景。
- 示例: "move", "copy"
allowedDirections (Array):
- 允许拖拽的方向轴，指定拖拽只能在指定方向上进行。有效值有 'TOP', 'BOTTOM', 'LEFT', 'RIGHT'，用于限制拖拽的方向。
- 示例: ['TOP', 'BOTTOM'] 或 ['LEFT', 'RIGHT']

使用示例

基本示例

在最简单的用法中，<DndItem> 组件用于展示一个可拖拽的元素。你只需要传递必要的属性，便可实现拖拽功能。

vue

<template>
    <DndItem
        type="move"
        id="item1"
        :item="{ name: 'Item 1', value: 100 }"
        :allowedDirections="['TOP', 'BOTTOM']"
    ></DndItem>
</template>

详细示例

在这个示例中，组件实现了一个可拖拽并限制了方向的项目。拖拽的方向只允许是上下（'TOP' 和 'BOTTOM'），可以根据需要自定义其他行为或样式。

vue

<template>
    <DndItem
        type="move"
        id="uniqueId"
        :item="{ name: 'Item 2', value: 200 }"
        :allowedDirections="['TOP', 'BOTTOM']"
    >
        <!-- 自定义内容或样式 -->
        <div>{{ item.name }} - {{ item.value }}</div>
    </DndItem>
</template>

注意事项

方向限制：allowedDirections 属性非常有用，能够帮助你控制拖拽操作只能在指定的方向进行。例如，['LEFT', 'RIGHT'] 只能在水平轴上进行拖拽，防止用户拖动到不希望的区域。
type 属性：根据 type 可以对拖拽操作进行类型区分，例如实现不同的拖拽行为（如复制或移动）。
item 参数：你可以通过 item 属性传递任何数据，使得拖拽项可以携带更复杂的状态或信息，便于在拖拽过程中进行处理。

配合其他组件使用

如果需要配合放置区域或拖拽容器，可以与如 <DndContainer> 等组件结合使用，方便实现复杂的拖拽交互。

<DndItem> ​

参数 ​

使用示例 ​

基本示例 ​

详细示例 ​

注意事项 ​