<DragCloneItem>

The <DragCloneItem> component is used to implement the cloning functionality of draggable objects. When dragging a target item, the component creates a clone of that item and allows the user to perform drag operations. It is suitable for scenarios where visual feedback or drag effects are needed, such as dragging duplicates or providing visual cues.

Props

• item (Object):
  • The data object of the draggable item, containing specific information about the item.
  • Example: { id: 'item1', name: 'Drag Me', value: 100 }
• type (String):
  • The drag type, used to distinguish between different drag behaviors or operations, typically differentiating from the drag target.
  • Example: "move", "copy"

Usage Examples

Basic Example

In the basic usage, the <DragCloneItem> component clones the draggable item and supports dragging the cloned item.

<template>
    <DragCloneItem type="move" :item="{ id: 'item1', name: 'Item 1', value: 100 }" />
</template>

Detailed Example

In this example, the component demonstrates a draggable clone item. When dragged, a clone of the item is created for user interaction.

<template>
    <DragCloneItem type="move" :item="{ id: 'item2', name: 'Item 2', value: 200 }">
        <!-- Optional: Add custom content or styles -->
        <div>{{ item.name }} - {{ item.value }}</div>
    </DragCloneItem>
</template>

Notes

• Cloning Drag Effect: The <DragCloneItem> component creates a clone of the item during dragging, without affecting the original item's data. The cloned item is only used for display during the drag operation.
• type Prop: The type prop can specify the drag type, allowing different drag behaviors to be handled as needed. For example, move indicates moving, while copy indicates copying.
• item Prop: Any custom data object can be passed through the item prop to provide additional state information during the drag operation.

Integration with Other Components

To achieve a complete drag-and-drop interaction, <DragCloneItem> can be used alongside other drag-related components (such as <DragDropZone> or <DndContainer>) to ensure a complete drag logic and feedback system.