<DropContainer>

The <DropContainer> component is used to create a drop zone that can be used in conjunction with drag-and-drop components (such as <DndItem> or <DragCloneItem>) to implement drag-and-drop interactions. It provides a target area for the dragged items, making it suitable for scenarios where managing drag-and-drop content is required.

Parameters

• id (String):

  • The unique identifier for the drop zone, which can be a layer ID or a module slot ID. It is used to distinguish different drop areas.
  • Example: "layer1", "slotA"

• type (String):

  • The drag-and-drop type, which is used to match the type of draggable items and determine what type of items this zone can accept.
  • Example: "move", "copy"

Usage Example

Basic Example

In its simplest usage, the <DropContainer> serves as a drop zone that receives items from drag-and-drop components.

<template>
    <DropContainer type="move" id="container1" />
</template>

Detailed Example

In this example, the <DropContainer> component serves as a drop zone that accepts draggable items of type move, and its id is set to "container1".

<template>
    <DropContainer type="move" id="container1">
        <!-- Optional: Add custom content or styles within the drop zone -->
        <div>Drop items here</div>
    </DropContainer>
</template>

Notes

• Drop Zone Identifier: The id property is used to identify the drop zone, ensuring that dragged items are matched with the correct target area. It can also be used for target area identification when performing drag-and-drop operations across multiple areas.
• type Property: The type property determines which types of draggable items the drop zone can accept. Ensure that the DropContainer and the draggable items are of matching types to ensure proper drag-and-drop behavior.
• Custom Content: The <DropContainer> component supports slots, allowing you to add custom content or styles inside the drop zone for more flexible display and interaction features.

Using with Other Components

The <DropContainer> is typically used in combination with components like <DndItem> or <DragCloneItem> to build complete drag-and-drop interactions. It can be used with multiple drop zones to create complex drag-and-drop scenarios.