{"id":12460,"library":"vue-drag-resize","title":"Vue Draggable and Resizable Component","description":"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.","status":"active","version":"1.5.4","language":"javascript","source_language":"en","source_url":"https://github.com/kirillmurashov/vue-drag-resize","tags":["javascript"],"install":[{"cmd":"npm install vue-drag-resize","lang":"bash","label":"npm"},{"cmd":"yarn add vue-drag-resize","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-drag-resize","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"VueDragResize is a default export. Use this import for local component registration within a Vue component's `components` option or `<script setup>`.","wrong":"import { VueDragResize } from 'vue-drag-resize';","symbol":"VueDragResize","correct":"import VueDragResize from 'vue-drag-resize';"},{"note":"This registers the component globally for Vue 2 applications, making it available throughout your app's templates without per-component import.","wrong":"import VueDragResize from 'vue-drag-resize';\nVue.use(VueDragResize);","symbol":"Global Component Registration (Vue 2)","correct":"import Vue from 'vue';\nimport VueDragResize from 'vue-drag-resize';\nVue.component('vue-drag-resize', VueDragResize);"},{"note":"For Vue 3 applications, global component registration must be done on the `app` instance created by `createApp()`, not directly on the global `Vue` object.","wrong":"import { createApp } from 'vue';\nimport Vue from 'vue';\nimport VueDragResize from 'vue-drag-resize';\nconst app = createApp(/* ... */);\nVue.component('vue-drag-resize', VueDragResize);","symbol":"Global Component Registration (Vue 3)","correct":"import { createApp } from 'vue';\nimport VueDragResize from 'vue-drag-resize';\nconst app = createApp(/* ... */);\napp.component('vue-drag-resize', VueDragResize);"}],"quickstart":{"code":"<script setup>\nimport { ref } from 'vue';\nimport VueDragResize from 'vue-drag-resize';\n\nconst width = ref(200);\nconst height = ref(200);\nconst top = ref(50);\nconst left = ref(50);\n\nfunction resize(newRect) {\n    width.value = newRect.width;\n    height.value = newRect.height;\n    top.value = newRect.top;\n    left.value = newRect.left;\n}\n</script>\n\n<template>\n    <div id=\"app-container\" style=\"width: 100%; height: 500px; border: 1px solid #ccc; position: relative;\">\n        <VueDragResize\n            :isActive=\"true\"\n            :w=\"width\"\n            :h=\"height\"\n            :x=\"left\"\n            :y=\"top\"\n            :minw=\"50\"\n            :minh=\"50\"\n            :parentLimitation=\"true\"\n            v-on:resizing=\"resize\"\n            v-on:dragging=\"resize\"\n            style=\"background-color: #f0f0f0; border: 1px dashed #999; display: flex; flex-direction: column; justify-content: center; align-items: center;\"\n        >\n            <h3>Hello Draggable World!</h3>\n            <p>Position: {{ top }} х {{ left }} </p>\n            <p>Size: {{ width }} х {{ height }}</p>\n            <p>Try dragging or resizing me!</p>\n        </VueDragResize>\n    </div>\n</template>\n\n<style>\n#app-container {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n}\n</style>","lang":"javascript","description":"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."},"warnings":[{"fix":"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.","message":"Version 2.0.0 introduced official Vue 3 support, alongside a \"completely redesigned code\" and \"improved performance.\" Users migrating from Vue 2 to Vue 3 (and upgrading this library from pre-2.0.0) should anticipate potential API changes or require adjustments to their component integration due to the underlying rewrite.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"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.","message":"Even within the Vue 2 line, version 1.5.0 involved a \"completely redesigned code\" and \"improved performance.\" While specific API breaks were not explicitly detailed, significant internal changes like this can introduce subtle behavioral differences or necessitate minor adjustments for users upgrading from versions prior to 1.5.0.","severity":"breaking","affected_versions":">=1.5.0 <2.0.0"},{"fix":"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`.","message":"For the component to correctly restrict movement and resizing within a parent element (using `parentLimitation`), it is crucial to either explicitly define the `parentW` and `parentH` props, or ensure the parent element itself has defined CSS dimensions (e.g., `width`, `height`) and `position: relative` that can be automatically calculated by the component. Without proper parent sizing, boundary constraints may not function as expected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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.","message":"The `isActive` prop controls whether the component is currently interactive (draggable/resizable). If `preventActiveBehavior` is `true`, the component will *not* automatically toggle its `isActive` state based on clicks inside or outside its area; `isActive` must then be controlled externally by your application logic.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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>`.","cause":"The `vue-drag-resize` component has not been correctly registered with your Vue application.","error":"Failed to resolve component: vue-drag-resize"},{"fix":"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.","cause":"The `resizing` or `dragging` event handler is receiving an `undefined` or malformed `newRect` object, possibly due to incorrect event binding or an unexpected change in event payload.","error":"TypeError: Cannot read properties of undefined (reading 'width')"},{"fix":"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.","cause":"The `isActive` prop is set to `false`, or `preventActiveBehavior` is `true` without external control of `isActive`, preventing user interaction. Alternatively, conflicting CSS might be interfering.","error":"Component is not draggable or resizable, or interaction is inconsistent."}],"ecosystem":"npm"}