👋
- 🖱️ Draggable: Easily add drag functionality to any element with customizable constraints and events.
↔️ Resizable: Resize elements from any edge or corner with configurable minimum and maximum dimensions.- 🧩 Composable: Use components directly or leverage TypeScript hooks for custom implementations.
- 📱 Responsive: Works on both desktop and mobile devices with touch support.
- 🔧 Customizable: Extensive styling options and configuration to match your design system.
- 📦 Lightweight: Minimal dependencies and tree-shakable for optimal bundle size.
- 🔒 Type-Safe: Built with TypeScript for better development experience and code reliability.
- 🎯 Grid Snapping: Ability to snap elements to a grid for precise positioning.
- 📏 Bounds Constraints: Restrict movement and resizing within defined boundaries.
- ♿ Accessibility: Enhanced keyboard navigation and ARIA attributes support.
pnpm add vue-dndnror
npm install vue-dndnror
yarn add vue-dndnr<script setup>
import { ref } from 'vue'
import { useDnR } from 'vue-dndnr'
const elementRef = ref(null)
// Use the combined hook
const { position, size, isDragging, isResizing } = useDnR(elementRef, {
initialPosition: { x: 0, y: 0 },
initialSize: { width: 200, height: 150 },
})
</script>
<template>
<div ref="elementRef" :style="{ left: `${position.x}px`, top: `${position.y}px` }">
This element can be dragged and resized using hooks
</div>
</template><script setup>
import { ref } from 'vue'
import { DnR, Draggable, Resizable } from 'vue-dndnr'
const position = ref({ x: 100, y: 100 })
const size = ref({ width: 200, height: 150 })
</script>
<template>
<!-- Draggable component -->
<Draggable v-model:position="position">
<div>Drag me!</div>
</Draggable>
<!-- Resizable component -->
<Resizable v-model:size="size" :min-width="100" :min-height="100">
<div>Resize me!</div>
</Resizable>
<!-- Combined Drag and Resize component -->
<DnR v-model:position="position" v-model:size="size">
<div>Drag and resize me!</div>
</DnR>
</template>This project is based on and inspired by the following projects:
This Project is strictly stands with the Composable Vue and Composition API of Vue 3.
MIT