Note: 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.

Vue3-Draggable-Resizable

![npm version](https://www.npmjs.com/package/vue3-draggable-resizable-plus)
![Software License](LICENSE.md)
![npm](https://www.npmjs.com/package/vue3-draggable-resizable-plus)
![vue version](https://github.com/hae-long/vue3-draggable-resizable)

> [Vue3 Component] Draggable, resizable and rotatable component for vue3, with support for collision detection, element snap alignment, real-time reference lines, grid snap, spacing indicators and unit conversion (px/%).

한국어 문서

- Features
- Usage
- Props
- Events
- Use adsorption alignment
- Grid System
- Spacing Indicators
- Rotation
- Unit Conversion (px/%)
- Utility Functions

$3

- Draggable and resizable
- Rotatable with snap angle support
- Define handles for resizing
- Restrict movement and size in parent node
- Customize various class names
- Provide your own markup for handles
- Adsorption alignment
- Reference line
- Grid system with snap-to-grid (supports rotated elements with center-point snap)
- Spacing indicators between elements (Figma-like)
- Unit conversion (px/%) support
- Utility functions for unit conversion

$3

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





$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:






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:






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:






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:






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:






Minimum width(px)

html





#### minH



type:

Number




default:






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



-

 : Top left

-

 : Top middle

-

 : Top right

-

 : Middle right

-

 : Middle left

-

 : Bottom left

-

 : Bottom middle

-

 : Bottom right

html





#### gridSpacing



type:

Number




default:






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:






Current rotation angle in degrees. You can use "v-model:rotation" to keep it up-to-date.

html





#### rotationSnap



type:

Number




default:






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





$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:






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





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





#### 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





$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

#### generateRandomColor()

Generates a random hex color string.

- Returns: A random color in hex format (e.g., '#3A7FE1')

Vue3-Draggable-Resizable

- Features
- Usage
- Props
- Events
- Use adsorption alignment
- Grid System
- Spacing Indicators
- Rotation
- Unit Conversion (px/%)
- Utility Functions

$3

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





$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:






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:






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:






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:






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:






Minimum width(px)

html





#### minH



type:

Number




default:






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



-

 : Top left

-

 : Top middle

-

 : Top right

-

 : Middle right

-

 : Middle left

-

 : Bottom left

-

 : Bottom middle

-

 : Bottom right

html





#### gridSpacing



type:

Number




default:






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:






Current rotation angle in degrees. You can use "v-model:rotation" to keep it up-to-date.

html





#### rotationSnap



type:

Number




default:






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





$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:






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





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





#### 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





$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

#### generateRandomColor()

Generates a random hex color string.

- Returns: A random color in hex format (e.g., '#3A7FE1')

vue3-draggable-resizable-plus

Vue3-Draggable-Resizable

Table of Contents

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

vue3-draggable-resizable-plus

Vue3-Draggable-Resizable

Table of Contents

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3