Vue DnD Kit

The grouping system implements a permission-based mechanism to control which draggable elements can be dropped into specific drop zones. Compatibility is determined by a shared group membership.

Group Matching Rules

• Compatibility: A draggable element and a drop zone are compatible if they share at least one group string.
• Multiple Groups: Elements can be assigned multiple groups (e.g., ['a', 'b']) to increase flexibility.
• Universal Compatibility: If either a draggable element or a drop zone has no groups (an empty array [] or the groups prop is not specified), it is considered "universal".
  • A draggable without groups can be dropped into any drop zone.
  • A drop zone without groups can accept any draggable element.

Reactive States for Visual Feedback

When using useDroppable, you can access reactive states to provide visual cues to the user:

• isOvered: true when a draggable element is currently hovering over the drop zone.
• isAllowed: true when the currently hovered draggable element is compatible with the drop zone (shares at least one group).

<!-- Example of group matching logic -->
<Droppable :groups="['files', 'images']"> <!-- Accepts anything with 'files' OR 'images' -->
  Images Folder
</Droppable>

<Draggable :groups="['images']"> <!-- Compatible with the folder above -->
  Photo.jpg
</Draggable>

<Draggable> <!-- Universal: Compatible with everything -->
  Universal Item
</Draggable>

When using GSAP's MorphSVG plugin with Vue DnD Kit, consider the following for production-ready implementations:

SVG Path Compatibility

For the smoothest morphing transitions, ensure that the source and target SVG paths have a similar number of points. While MorphSVG handles varying point counts, highly complex transformations may require manual path optimization to prevent visual artifacts.

Performance Best Practices

SVG morphing is computationally expensive. To maintain high frame rates:

• Simplify Paths: Reduce the number of points in your SVG paths.
• Use requestAnimationFrame: Ensure animations are synchronized with the browser's refresh rate.
• Test on Low-end Devices: Verify performance on target hardware to ensure smooth interactions.

GSAP MorphSVG Options

You can extend the gsap.to() call with additional MorphSVG-specific properties:

• shape: The target shape to morph to.
• shapeIndex: Used for targeting specific sub-paths within a complex SVG.
• type: Specifies different morphing algorithms.
• Standard GSAP properties: ease, delay, duration, etc.

Groups allow draggable items and droppable zones to declare specific "channels" of compatibility. This mechanism restricts drag-and-drop operations to compatible parties, while incompatible zones are silently ignored.

Compatibility Rules

• Global Compatibility: An empty array [] on either the draggable item or the droppable zone acts as a "global" tag, meaning it is compatible with everything.
• Restricted Compatibility: If both the draggable item and the droppable zone have non-empty arrays for groups, they are only compatible if they share at least one common group.

// Draggable item tagged as 'dev'
makeDraggable(itemRef, {
  groups: ['dev'],
});

// Zone that only accepts 'dev' items
makeDroppable(devZoneRef, {
  groups: ['dev'],
});

When performing drag-and-drop operations on lists (sorting, swapping, or copying), provide a payload function to makeDraggable. This allows the library to build the event.draggedItems array with the correct context.

Payload Signature

type TDraggablePayload<T = any> = () => [index: number, items: T[]];

When the payload is provided, the IDragItem in the event object will contain:

• index: The position of the item in the list.
• item: The actual data at that index.
• items: The full source array.

For arbitrary custom data that is not part of a list, use the data option instead. You can use both: payload for list helpers and data for metadata.

const items = ref([1, 2, 3]);

// Providing payload for list context
makeDraggable(itemRef, { dragHandle: '.handle' }, () => [0, items.value]);

// In an onDrop event handler:
// e.draggedItems[0].index, e.draggedItems[0].item, e.draggedItems[0].items