[Vue3 Component] Draggable, resizable and rotatable with grid snap, spacing indicators and guide lines
npm install vue3-draggable-resizable-plusNote: This is a maintained fork of [a7650/vue3-draggable-resizable/main-branch]. The original repository seems to be inactive since 2022. I have forked it to continue development, fix bugs, and add new features.

bash
$ npm install vue3-draggable-resizable-plus
`
Register the Vue3DraggableResizable
`js
// >main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable-plus'
// default styles
import 'vue3-draggable-resizable-plus/style.css'
// You will have a global component named "Vue3DraggableResizable"
createApp(App)
.use(Vue3DraggableResizable)
.mount('#app')
`
You can also use it separately within the component
`js
// >component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable-plus'
// default styles
import 'vue3-draggable-resizable-plus/style.css'
export default defineComponent({
components: { Vue3DraggableResizable }
// ...other
})
`
Here is a complete example of using "vue-template"
`vue
:initW="110"
:initH="120"
v-model:x="x"
v-model:y="y"
v-model:w="w"
v-model:h="h"
v-model:active="active"
:typeX="typeX"
:typeY="typeY"
:typeW="typeW"
:typeH="typeH"
:draggable="true"
:resizable="true"
@activated="print('activated')"
@deactivated="print('deactivated')"
@drag-start="print('drag-start')"
@resize-start="print('resize-start')"
@dragging="print('dragging')"
@resizing="print('resizing')"
@drag-end="print('drag-end')"
@resize-end="print('resize-end')"
>
This is a test example
`
$3
#### initW
type: Number
default: null
Set initial width(px)
`html
`
#### initH
type: Number
default: null
Set initial height(px)
`html
`
#### w
type: Number
default: 0
Current width of the container. Unit depends on typeW prop.
You can use "v-model:w" to keeps it up-to-date
`html
`
#### h
type: Number
default: 0
Current height of the container. Unit depends on typeH prop.
You can use "v-model:h" to keeps it up-to-date
`html
`
#### x
type: Number
default: 0
Current left position of the container. Unit depends on typeX prop.
You can use "v-model:x" to keeps it up-to-date
`html
`
#### y
type: Number
default: 0
The current top position of the container. Unit depends on typeY prop.
You can use "v-model:y" to keeps it up-to-date
`html
`
#### typeX
type: String
default: 'px'
validator: ['px', '%']
Unit type for x position. Can be 'px' or '%'.
`html
`
#### typeY
type: String
default: 'px'
validator: ['px', '%']
Unit type for y position. Can be 'px' or '%'.
`html
`
#### typeW
type: String
default: 'px'
validator: ['px', '%']
Unit type for width. Can be 'px' or '%'.
`html
`
#### typeH
type: String
default: 'px'
validator: ['px', '%']
Unit type for height. Can be 'px' or '%'.
`html
`
#### minW
type: Number
default: 20
Minimum width(px)
`html
`
#### minH
type: Number
default: 20
Minimum height(px)
`html
`
#### active
type: Boolean
default: false
Indicates whether the component is selected.
You can use "v-model:active" to keeps it up-to-date
`html
`
#### draggable
type: Boolean
default: true
Defines the component can be draggable or not
`html
`
#### resizable
type: Boolean
default: true
Defines the component can be resizable or not
`html
`
#### lockAspectRatio
type: Boolean
default: false
The lockAspectRatio property is used to lock aspect ratio.
`html
`
#### disabledX
type: Boolean
default: false
Defines the component can be moved on x-axis or not
`html
`
#### disabledY
type: Boolean
default: false
Defines the component can be moved on y-axis or not
`html
`
#### disabledW
type: Boolean
default: false
Defines the component's width can be modified or not
`html
`
#### disabledH
type: Boolean
default: false
Defines the component's height can be modified or not
`html
`
#### parent
type: Boolean
default: false
Restrict movement and size within its parent node
`html
`
#### handles
type: Array
default: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']
Define the array of handles to restrict the element resizing
- tl : Top left
- tm : Top middle
- tr : Top right
- mr : Middle right
- ml : Middle left
- bl : Bottom left
- bm : Bottom middle
- br : Bottom right
`html
`
#### gridSpacing
type: Number
default: 20
Grid spacing in pixels for snap-to-grid feature.
`html
`
#### snapToGrid
type: Boolean
default: false
Enable snap-to-grid during drag and resize operations.
`html
`
#### rotatable
type: Boolean
default: false
Enable rotation functionality. When enabled, a rotation handle appears above the component.
`html
`
#### rotation
type: Number
default: 0
Current rotation angle in degrees. You can use "v-model:rotation" to keep it up-to-date.
`html
`
#### rotationSnap
type: Number
default: 0
Snap angle in degrees during rotation. Set to 0 to disable snap. For example, 15 will snap to 0°, 15°, 30°, etc.
`html
`
#### classNameRotateHandle
type: String
default: ''
Custom class name for the rotation handle element.
`html
`
#### classNameDraggable
type: String
default: draggable
Used to set the custom class of a draggable-resizable component when draggable is enable.
`html
`
#### classNameResizable
type: String
default: resizable
Used to set the custom class of a draggable-resizable component when resizable is enable.
`html
`
#### classNameDragging
type: String
default: dragging
Used to set the custom class of a draggable-resizable component when is dragging.
`html
`
#### classNameResizing
type: String
default: resizing
Used to set the custom class of a draggable-resizable component when is resizing.
`html
`
#### classNameActive
type: String
default: active
Used to set the custom class of a draggable-resizable component when is active.
`html
`
#### classNameHandle
type: String
default: handle
Used to set the custom common class of each handle element.
`html
`
following handle nodes will be rendered
`html
...
...
`
$3
#### activated
payload: -
`html
`
#### deactivated
payload: -
`html
`
#### drag-start
payload: { x: number, y: number }
`html
`
#### dragging
payload: { x: number, y: number }
`html
`
#### drag-end
payload: { x: number, y: number }
`html
`
#### resize-start
payload: { x: number, y: number, w: number, h: number }
`html
`
#### resizing
payload: { x: number, y: number, w: number, h: number }
`html
`
#### resize-end
payload: { x: number, y: number, w: number, h: number }
`html
`
#### rotate-start
payload: { rotation: number }
`html
`
#### rotating
payload: { rotation: number }
`html
`
#### rotate-end
payload: { rotation: number }
`html
`
$3
You need to import another component to use the "adsorption alignment" feature.
This can be used as follows.
`vue
Test
Another test
`
$3
These props apply to DraggableContainer
#### disabled
type: Boolean
default: false
Disable adsorption alignment feature
`html
Test
Another test
`
#### adsorbParent
type: Boolean
default: true
Adsorption near parent component
`html
Test
Another test
`
#### adsorbCols
type: Array
default: null
Custom guides(column)
`html
Test
Another test
`
#### adsorbRows
type: Array
default: null
Custom guides(row)
`html
Test
Another test
`
#### referenceLineVisible
type: Boolean
default: true
Reference line visible
`html
Test
Another test
`
#### referenceLineColor
type: String
default: #f00
Reference line color
`html
Test
Another test
`
#### showSpacing
type: Boolean
default: true
Show spacing indicators between active element and other elements/container edges. Displays distance lines with measurements (Figma-like feature).
`html
Test
`
#### spacingColor
type: String
default: #ff6b6b
Color of the spacing indicator lines and text.
`html
Test
`
$3
DraggableContainer supports a visual grid system with snap-to-grid functionality.
#### gridSpacing
type: Number
default: 20
Grid spacing in pixels
`html
Test
`
#### showGrid
type: Boolean
default: false
Show visual grid lines
`html
Test
`
#### gridColor
type: String
default: #e0e0e0
Grid line color
`html
Test
`
#### showGridNumbersX
type: Boolean
default: false
Show grid line numbers on X-axis (horizontal)
`html
Test
`
#### showGridNumbersY
type: Boolean
default: false
Show grid line numbers on Y-axis (vertical)
`html
Test
`
$3
The spacing indicators feature shows distance measurements between the active element and other elements or container edges, similar to design tools like Figma.
`vue
Element 1
Element 2
`
When an element is active (selected), the spacing indicators will display:
- Distance to container edges (top, right, bottom, left)
- Distance to nearby elements
The indicators automatically update during drag, resize, and rotation operations. For rotated elements, spacing is calculated based on the axis-aligned bounding box.
$3
The rotation feature allows elements to be rotated around their center point. Enable rotation with the rotatable prop.
`vue
:rotatable="true"
v-model:rotation="rotation"
:rotationSnap="15"
@rotate-start="onRotateStart"
@rotating="onRotating"
@rotate-end="onRotateEnd"
>
Rotatable element
`
#### Rotation Features
- Rotation Handle: A circular handle appears above the element when rotatable is enabled
- Angle Snap: Use rotationSnap prop to snap to specific angles (e.g., 15° intervals)
- Cursor Direction: Resize handle cursors automatically adjust based on rotation angle
- Center-point Grid Snap: When grid snap is enabled, rotated elements snap based on their center point
- Rotated Resize: Resizing works correctly regardless of rotation angle, maintaining the anchor point
$3
The component supports both px and % units for position and size. Use the typeX, typeY, typeW, and typeH props to specify the unit type.
`vue
:x="10"
:y="10"
:w="50"
:h="50"
typeX="%"
typeY="%"
typeW="%"
typeH="%"
>
50% width and height at 10% position
`
$3
The package exports utility functions for unit conversion that you can use in your application.
`js
import {
convertToPixel,
convertFromPixel,
validatePercentage,
validatePixel,
generateRandomColor
} from 'vue3-draggable-resizable-plus'
// Convert percentage to pixels
const pixelValue = convertToPixel(50, '%', 1000) // 500
// Convert pixels to percentage
const percentValue = convertFromPixel(500, '%', 1000) // 50
// Validate percentage value (0-100)
const isValidPercent = validatePercentage(50) // true
// Validate pixel value within parent bounds
const isValidPixel = validatePixel(100, 500) // true
// Generate random hex color
const color = generateRandomColor() // e.g., '#3A7FE1'
`
#### convertToPixel(value, unit, parentSize)
Converts a value to pixels based on the unit type.
- value: The numeric value to convert
- unit: The unit type ('px' or '%')
- parentSize: The parent element size in pixels
- Returns: The value converted to pixels
#### convertFromPixel(value, unit, parentSize)
Converts a pixel value to the specified unit type.
- value: The pixel value to convert
- unit: The target unit type ('px' or '%')
- parentSize: The parent element size in pixels
- Returns: The value converted to the target unit (with 2 decimal precision for %)
#### validatePercentage(value)
Validates if a percentage value is within valid range (0-100).
- value: The percentage value to validate
- Returns: true if value is between 0 and 100 (inclusive), false otherwise
#### validatePixel(value, parentSize)
Validates if a pixel value is within parent bounds.
- value: The pixel value to validate
- parentSize: The parent element size in pixels
- Returns: true if value is between 0 and parentSize (inclusive), false` otherwise