Release Changes

New Features

Overlay Positioning Control

• overlayPosition.method: Control insertion method (append, prepend, before, after)
• overlayPosition.target: Specify custom container for overlay insertion (Element, HTMLElement, or CSS selector)
• overlayPosition.zIndex: Set custom z-index for overlay containers
• overlayPosition.className: Apply custom CSS classes to overlay containers

Container Props Support

• containerProps in useDraggable: Pass custom data and configuration to drag container components
• Support for reactive props (ref, reactive, computed) without .value
• Full TypeScript support with proper prop validation

Enhanced Plugin Configuration

• Extended IPluginOptions interface with overlay positioning options
• Improved useDragContainer with defineProps() integration

Example Usage

// Plugin configuration
app.use(VueDnDKitPlugin, {
  overlayPosition: {
    method: 'before',
    target: document.body,
    zIndex: 9999,
    className: 'custom-overlay-container',
  },
} as IPluginOptions);

// useDraggable with container props
const { elementRef } = useDraggable({
  container: CustomOverlay,
  containerProps: {
    theme: 'dark',
    size: 'large',
    customData: { id: 123, name: 'Item' },
  },
});

Breaking Changes

None! All new features are backward compatible.

🚀 New Features

Disabled State for Draggable Elements and Drop Zones

• Conditional Dragging: Easily disable draggable elements based on conditions
• Conditional Dropping: Control when drop zones can accept items

// Disable draggable elements
const { elementRef } = useDraggable({
  disabled: true, // or use reactive refs/computed
});

// Disable drop zones
const { elementRef } = useDroppable({
  disabled: isDropDisabled, // reactive reference
});

Implementation Examples

We've added comprehensive documentation and examples showing how to:

• Disable elements conditionally
• Use computed properties for complex conditions
• Handle disabled state in component wrappers
• Style disabled elements appropriately

📚 Documentation Updates

• New example in the basic examples section: "Disabled Elements"
• Added guidance for handling reactivity with computed properties

🐛 Bug Fixes

• None in this release

As always, appreciate your feedback and contributions. If you encounter any issues or have suggestions, please open an issue on GitHub.

Thank you for using Vue DnD Kit!

Keyboard navigation now works correctly =)

v1.5.1 (2025-06-12)

🐛 Bug Fixes

• core: Fixed element detection issue within nested zones with incompatible groups
  • Resolved a critical bug where elements from invalid nested zones (with incompatible groups) could be incorrectly detected
  • Improved element search logic in the validateCollisionResults function to account for nested zones group compatibility
  • Added additional validation to the possibleElement condition to prevent element detection in zones with incompatible groups

Release 1.5.0

New Features

• LazyAllowed: Added new isLazyAllowed property that works similarly to isAllowed but only evaluates when a draggable element hovers over the drop zone. This improves performance for complex validation logic.

• Promise-based Drop Handling: The onDrop handler can now return a Promise. If the Promise resolves to true, the drop operation completes normally. If it resolves to false, the drag operation continues without dropping the items, allowing for asynchronous validation or API calls before finalizing the drop.

Documentation

• Updated documentation with examples for async drop handling

Example

const { elementRef: droppableRef, isOvered } = useDroppable({
    events: {
      onDrop() {
        return new Promise((resolve) => {
          const result = confirm('Are you sure?');
          resolve(result);
        });
      },
    },
  });

You can customize the plugin behavior by passing options during registration. For better TypeScript support, you can import the IPluginOptions type:

import VueDnDKitPlugin, { type IPluginOptions } from '@vue-dnd-kit/core';

app.use(VueDnDKitPlugin, {
  defaultOverlay: {
    styles: {
      // Optional custom styles for drag overlay
      opacity: 0.8,
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
      transition: 'none',
    },
  },
} as IPluginOptions);

Now u can use lib in nuxt without error and for vitepress, the error was related to the fact that there was no IntersectionObserver on the server