Vue Drag & Drop Library - Core Package

Core package of the Vue Drag & Drop library with essential hooks and functionality.

Inspired by the popular React DnD Kit library, adapted for Vue.js

Lightweight & High Performance

Vue DnD Kit is designed to be extremely lightweight while delivering exceptional performance. The library has been optimized for:

• 🚀 Minimal bundle size - keep your application fast and responsive
• ⚡ Efficient DOM operations - optimized for handling large lists and complex interactions
• 🔄 Smart rendering - prevents unnecessary re-renders during drag operations
• 📱 Smooth experience - even on mobile and low-powered devices

Unlimited Flexibility

The library is built with flexibility as a core principle, allowing you to implement virtually any drag and drop scenario:

• 🎯 Any UI pattern - sortable lists, kanban boards, calendars, file uploads, and more
• 🎨 Any design system - works with any UI library or custom components
• 📐 Any layout - grid, flex, or custom positioning systems
• 🔄 Any interaction model - simple drag and drop, multi-select, nested containers

Features

Core Capabilities

• 🎯 Simple Composables API

  • Intuitive hooks-based approach
  • Clean and declarative syntax
  • Minimal boilerplate code

• 🎨 Full Customization

  • Custom drag overlays
  • Flexible styling system
  • Animation support
  • Custom drag handles

• 📱 Advanced Input Support

  • Touch devices support
  • Mouse events
  • Multi-touch gestures
  • Full keyboard navigation - complete drag and drop operations using only keyboard

Accessibility

• ♿ Keyboard Navigation

  • Start and control drag operations with keyboard
  • Arrow keys for movement
  • Space/Enter for selection and dropping
  • Escape to cancel drag operations
  • Tab navigation between draggable elements

• 🔍 Screen Reader Support

  • ARIA attributes for drag and drop operations
  • Descriptive announcements during interactions
  • Semantic HTML structure

Performance

• ⚡ Optimized Rendering

  • Virtual DOM friendly
  • Minimal re-renders
  • Efficient DOM updates
  • Memory leak prevention

• 🔄 Smart Auto-scrolling

  • Smooth scroll animations
  • Configurable thresholds
  • Performance-optimized
  • Works with nested scrollable containers

Developer Experience

• 🔍 TypeScript Ready

  • Full type coverage
  • Type inference
  • IDE autocompletion
  • Type-safe events

• 📐 Layout Features

  • Grid system support
  • Flex layout compatible
  • Responsive design ready
  • Dynamic constraints

Advanced Features

• 🎯 Smart Grouping

  • Element groups
  • Zone filtering
  • Nested groups
  • Dynamic group validation

• 📊 Rich Events System

  • Comprehensive lifecycle events
  • Custom event handlers
  • Drag state tracking
  • Position coordinates

• 🛡️ Built-in Utilities

  • Geometry calculations
  • Bounding box tracking
  • Position management
  • Intersection detection

Integration

• 🔌 Framework Integration
  • Vue 3 Composition API
  • Nuxt.js compatible
  • Works with SSR
  • Plugin ecosystem ready

Installation

Choose your preferred package manager:

1npm install @vue-dnd-kit/core @vueuse/core

1yarn add @vue-dnd-kit/core @vueuse/core

1pnpm install @vue-dnd-kit/core @vueuse/core

Setup as a Plugin

You can register the library as a Vue plugin in your main.ts/js file:

1import { createApp } from 'vue';
2import App from './App.vue';
3import VueDnDKitPlugin from '@vue-dnd-kit/core';
4
5const app = createApp(App);
6
7// Register the plugin
8app.use(VueDnDKitPlugin);
9
10app.mount('#app');

This will make all the components and composables globally available in your application.

Basic Usage

App.vue

^{📄 Root Application Component}

1<script setup lang="ts">
2  import { ref } from 'vue';
3  import Draggable from './components/Draggable.vue';
4  import Droppable from './components/Droppable.vue';
5
6  const handleDrop = () => (elementInDropZone.value = true);
7
8  const handleEnd = () => (elementInDropZone.value = false);
9
10  const elementInDropZone = ref<boolean>(false);
11</script>
12
13<template>
14  <div>
15    <Draggable v-if="!elementInDropZone"> drag me </Draggable>
16    <Droppable @drop="handleDrop">
17      <Draggable
18        v-if="elementInDropZone"
19        @end="handleEnd"
20      >
21        im in drop zone
22      </Draggable>
23    </Droppable>
24  </div>
25</template>

Draggable.vue

^{🧩 components/Draggable.vue}

1<script setup lang="ts">
2  import { useDraggable } from '@vue-dnd-kit/core';
3
4  const emit = defineEmits<{
5    (e: 'end'): void;
6  }>();
7
8  const { elementRef, handleDragStart, isDragging } = useDraggable({
9    events: { onEnd: () => emit('end') },
10  });
11</script>
12
13<template>
14  <div
15    ref="elementRef"
16    @pointerdown="handleDragStart"
17    :class="{ dragging: isDragging }"
18    tabindex="0"
19    role="button"
20    aria-grabbed="false"
21    :aria-pressed="isDragging"
22  >
23    <slot />
24  </div>
25</template>
26
27<style scoped>
28  .dragging {
29    opacity: 0.5;
30  }
31</style>

Droppable.vue

^{🧩 components/Droppable.vue}

1<script setup lang="ts">
2  import { useDroppable } from '@vue-dnd-kit/core';
3
4  const emit = defineEmits<{
5    (e: 'drop'): void;
6  }>();
7
8  const { elementRef, isOvered } = useDroppable({
9    events: { onDrop: () => emit('drop') },
10  });
11</script>
12
13<template>
14  <div
15    ref="elementRef"
16    :class="{
17      droppable: true,
18      'is-overed': isOvered,
19    }"
20    role="region"
21    aria-dropeffect="move"
22  >
23    drop here
24    <slot />
25  </div>
26</template>
27
28<style scoped>
29  .droppable {
30    width: 100px;
31    height: 100px;
32    border: 1px solid black;
33  }
34  .is-overed {
35    background-color: #f0f0f0;
36    border: 1px dashed red;
37  }
38</style>

📄 License

MIT © ZiZiGY

---

🎉 Congratulations on the official release! 🎉

Made with ❤️ for the Vue.js community