<DndItem>

The <DndItem> component is designed for supporting drag-and-drop functionality. It enables users to create rich drag-and-drop experiences by defining custom drag data and controlling drag directions.

Parameters

• id (String):
  • The unique identifier for the drag item, used to distinguish each draggable item.
  • Example: "id1"
• item (Object):
  • The data object for the draggable item, containing specific information about the item.
  • Example: { name: 'Item 1', value: 100 }
• type (String):
  • The drag type used to distinguish between different drag operations. This is useful in scenarios where multiple drag interactions are handled.
  • Example: "move", "copy"
• allowedDirections (Array):
  • The allowed drag directions, specifying the axis along which dragging is permitted. Valid values are 'TOP', 'BOTTOM', 'LEFT', 'RIGHT', used to restrict drag directions.
  • Example: ['TOP', 'BOTTOM'] or ['LEFT', 'RIGHT']

Usage Example

Basic Example

In the simplest usage, the <DndItem> component is used to display a draggable item. You only need to pass the required properties to enable dragging.

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

Detailed Example

In this example, the component implements a draggable item with direction restrictions. The drag is allowed only in the vertical direction ('TOP' and 'BOTTOM'), and you can customize other behaviors or styles as needed.

<template>
    <DndItem
        type="move"
        id="uniqueId"
        :item="{ name: 'Item 2', value: 200 }"
        :allowedDirections="['TOP', 'BOTTOM']"
    >
        <!-- Custom content or styling -->
        <div>{{ item.name }} - {{ item.value }}</div>
    </DndItem>
</template>

Notes

• Direction Restriction: The allowedDirections property is very useful for controlling drag operations along specific axes. For example, ['LEFT', 'RIGHT'] restricts the drag to horizontal movement, preventing users from dragging into unintended areas.
• type Property: The type allows you to differentiate drag behaviors, such as moving or copying an item. This helps handle various types of drag interactions.
• item Parameter: The item property can carry any data you need, allowing the drag item to hold more complex state or information, which can be processed during the drag operation.

Using with Other Components

If you need to combine the drag item with a drop zone or container, you can use it in conjunction with components like <DndContainer>, making it easier to implement complex drag-and-drop interactions.