vue-drag-resize is a lightweight Vue.js component that enables elements to be made draggable and resizable within their parent container. It offers distinct versions for both Vue 2 (versions prior to 2.0.0, with `1.5.4` being a recent stable release in this line) and Vue 3 (versions 2.0.0 and above, with `2.0.3` being a recent stable for Vue 3). The library generally maintains an irregular release cadence, focusing on bug fixes and performance enhancements across its two major version tracks. Key differentiators include its zero external dependencies, fully reactive props, built-in support for touch events, grid snapping capabilities, options to maintain aspect ratio during resizing, strict confinement within parent boundaries, and the ability to restrict dragging or resizing to specific axes.
npm install vue-drag-resizeVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to integrate and use `vue-drag-resize` in a Vue 3 application using the Composition API (`<script setup>`). It shows how to initialize the component with dimensions and position, restrict its movement and resizing within a parent container, and handle the `resizing` and `dragging` events to update the component's state.
Review the updated documentation for version 2.x and re-evaluate your component's integration, especially prop usage and event handling, when migrating to Vue 3.
Test your application thoroughly after upgrading to 1.5.0 or later (within Vue 2) to catch any unexpected behavioral changes due to the internal redesign. Consult the GitHub issue tracker for reported regressions if any.
Ensure the component's direct parent has `position: relative` and defined `width` and `height` CSS properties. Alternatively, manually pass `parentW` and `parentH` props to `vue-drag-resize`.
If `preventActiveBehavior` is `true`, ensure you have implemented external logic (e.g., button clicks, parent component state) to toggle the `isActive` prop when interaction is desired.
Ensure you have either globally registered it (`Vue.component('vue-drag-resize', VueDragResize)` for Vue 2 or `app.component('vue-drag-resize', VueDragResize)` for Vue 3) or locally within your parent component's `components` option, or directly imported and used in `<script setup>`.Verify that your event binding (`v-on:resizing="resize"`) is correct and that your `resize` method correctly expects and destructures the `newRect` object (e.g., `function resize(newRect) { this.width = newRect.width; }`) as shown in the documentation.Ensure `isActive` is set to `true` to enable interaction. If `preventActiveBehavior` is active, manage `isActive` via external application state. Also, check for any parent or sibling CSS properties like `pointer-events: none` or high `z-index` values that might obstruct interaction.
No dependency data recorded yet.