draggable-resizable-vue3

Props

Position and sizes

x

Type: Number
Required: false
Default: 0

Define the x position of the element.

<draggable-resizable-vue v-model:x="x">

y

Type: Number
Required: false
Default: 0

Define the y position of the element.

<draggable-resizable-vue v-model:y="0">

z

Type: Number|String
Required: false
Default: auto

Define the zIndex of the element.

<draggable-resizable-vue :z="999">

w

Type: Number|String
Required: false

Define the initial width of the element. It also supports auto, but when you start resizing the value will fallback to a number.

<draggable-resizable-vue v-model:w="width">

h

Type: Number|String
Required: false
Default: 200

Define the initial height of the element. It also supports auto, but when you start resizing the value will fallback to a number.

<draggable-resizable-vue v-model:h="height">

minWidth

Type: Number
Required: false
Default: 50

Define the minimal width of the element.

<draggable-resizable-vue :min-width="50">

minHeight

Type: Number
Required: false
Default: 50

Define the minimal height of the element.

<draggable-resizable-vue :min-height="50">

maxWidth

Type: Number
Required: false
Default: null

Define the maximum width of the element.

<draggable-resizable-vue :max-width="400">

maxHeight

Type: Number
Required: false
Default: null

Define the maximum height of the element.

<draggable-resizable-vue :max-height="50">

Active state

active

Type: Boolean
Required: false
Default: false

Determines if the component should be active or not. The prop reacts to changes and also can be used with the sync modifieropen in new window to keep the state in sync with the parent. You can use along with the preventDeactivation prop in order to fully control the active behavior from outside the component.

<draggable-resizable-vue v-model:active="isActive">

<script setup>
import { ref } from 'vue'

const isActive = ref(false)
...

activeOnHover

Type: Boolean
Required: false
Default: false

Toggle active while hovering.

<draggable-resizable-vue :active-on-hover="true">

preventDeactivation

Type: Boolean
Required: false
Default: false

Determines if the component should be deactivated when the user clicks/taps outside it.

<draggable-resizable-vue :prevent-deactivation="true">

Dragging

draggable

Type: Boolean
Required: false
Default: true

Defines it the component should be draggable or not.

<draggable-resizable-vue :draggable="false">

dragHandle

Type: String
Required: false

Defines the selector that should be used to drag the component.

<draggable-resizable-vue drag-handle=".drag">

dragCancel

Type: String
Required: false

Defines a selector that should be used to prevent drag initialization.

<draggable-resizable-vue drag-cancel=".drag">

disableUserSelect

Type: Boolean
Required: false
Default: true

By default, the component adds the style declaration 'user-select:none' to itself to prevent text selection during drag. You can disable this behaviour by setting this prop to false.

<draggable-resizable-vue :disable-user-select="false">

enableNativeDrag

Type: Boolean
Required: false
Default: false

By default, the browser's native drag and drop funcionality (usually used for images and some other elements) is disabled, as it may conflict with the one provided by the component. If you need, for whatever reason, to have this functionality back you can set this prop to true.

<draggable-resizable-vue :enable-native-drag="true">

Resizing

resizable

Type: Boolean
Required: false
Default: true

Defines it the component should be resizable or not.

<draggable-resizable-vue :resizable="false">

lockAspectRatio

Type: Boolean
Required: false
Default: false

The lockAspectRatio property is used to lock aspect ratio. This property doesn't play well with grid, so make sure to use only one at a time.

<draggable-resizable-vue :lock-aspect-ratio="true">

handles

Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']

Define the array of handles to restrict the element resizing:

  • tl - Top left
  • tm - Top middle
  • tr - Top right
  • mr - Middle right
  • br - Bottom right
  • bm - Bottom middle
  • bl - Bottom left
  • ml - Middle left
<draggable-resizable-vue :handles="['tm','bm','ml','mr']">

handlesType

Type: String
Required: false
Default: handles

The prop can be handles, borders or custom.

  • handles - handles are squares around the element.
  • borders - resizable borders and corners of the element. If custom
  • custom - no styles for handles. For using your own styles or classes.
  • New approach for styling component.
<draggable-resizable-vue handles-type="borders">

handlesSize

Type: Number
Required: false
Default: 10

If handlesType='handles' defines the squares sizes. if If handlesType='border' defines the borders sizesborders or custom.

<draggable-resizable-vue :handles-size="14">

handlesBorder

Type: String
Required: false
Default: 0.5px solid #bbb

You can modify or disable the handles border.

<draggable-resizable-vue handles-border="none">

Parent

You can use parent prop as a selector but we recommend using draggable-resizable-container instead. Check the container props here.

parent

Type: Boolean|String
Required: false
Default: false

If it's true restricts the movement and the dimensions of the component to the parent. Also you can provide a selector of any parent element.

<draggable-resizable-vue parent=".parent">

Grid

axis

Type: String
Required: false
Default: both

Define the axis on which the element is draggable. Available values are x, y or both.

<draggable-resizable-vue axis="x">

grid

Type: Array
Required: false
Default: [1,1]

Define the grid on which the element is snapped.

<draggable-resizable-vue :grid="[20,20]">

showGrid

Type: Boolean|String
Required: false
Default: false

Works only if :parent="true" or parent=".selector". Adds grid to the parent element. Can be true, false, 'x', 'y', 'both'.

<draggable-resizable-vue :show-grid="true">

gridColor

Type: String
Required: false
Default: rgba(0, 0, 0, 0.1)

Color of the grid when :show-grid="true".

<draggable-resizable-vue grid-color="rgba(0, 0, 0, 0.3)">

scale

Type: Number|Array
Required: false
Default: 1

The scale prop controls the scale property when the CSS 3 scale transformationopen in new window is applied to one of the parent elements. If not provided the default value is 1.

<draggable-resizable-vue :scale="0.5">

<draggable-resizable-vue :scale="[0.5, 0.4]">

Classes

className

Type: String
Required: false
Default: drv

Used to set the custom class of a draggable-resizable component.

<draggable-resizable-vue class-name="my-class">

classNameDraggable

Type: String
Required: false
Default: drv-draggable

Used to set the custom class of a draggable-resizable component when draggable is enable.

<draggable-resizable-vue class-name-draggable="my-draggable-class">

classNameResizable

Type: String
Required: false
Default: drv-resizable

Used to set the custom class of a draggable-resizable component when resizable is enable.

<draggable-resizable-vue class-name-resizable="my-resizable-class">

classNameDragging

Type: String
Required: false
Default: drv-dragging

Used to set the custom class of a draggable-resizable component when is dragging.

<draggable-resizable-vue class-name-dragging="my-dragging-class">

classNameResizing

Type: String
Required: false
Default: drv-resizing

Used to set the custom class of a draggable-resizable component when is resizing.

<draggable-resizable-vue class-name-resizing="my-resizing-class">

classNameActive

Type: String
Required: false
Default: drv-active

Used to set the custom class of a draggable-resizable component when is active.

<draggable-resizable-vue class-name-active="my-active-class">

classNameHandle

Type: String
Required: false
Default: drv-handle

Used to set the custom common class of each handle element. This way you can style each handle individually using the selector <your class>-<handle code>, where handle code identifies one of the handles provided by the handle prop.

So for example, this component:

<draggable-resizable-vue
  class-name-handle="my-handle-class"
></draggable-resizable-vue>

renders the following:

<div ...>
  <div class="my-handle-class my-handle-class-tl ..."></div>
  <div class="my-handle-class my-handle-class-tm ..."></div>
  <div class="my-handle-class my-handle-class-tr ..."></div>
  [...]
</div>

Functions

onDragStart

Type: Function Required: false Default: null

Called when dragging starts (element is clicked or touched). If false is returned by any handler, the action will cancel. You can use this function to prevent bubbling of events.

<draggable-resizable-vue :onDragStart="onDragStartCallback">

function onDragStartCallback(ev){
   ...
   // return false; — for cancel
}

onDrag

Type: Function Required: false Default: null

Called before the element is dragged. The function receives the next values of x and y. If false is returned by any handler, the action will cancel.

<draggable-resizable-vue :onDrag="onDragCallback">

function onDragStartCallback(x, y){
   ...
   // return false; — for cancel
}

onResizeStart

Type: Function Required: false Default: null

Called when resizing starts (handle is clicked or touched). If false is returned by any handler, the action will cancel.

<draggable-resizable-vue :onResizeStart="onResizeStartCallback">


function onResizeStartCallback(handle, ev){
   ...
   // return false; — for cancel
}

onResize

Type: Function Required: false Default: null

Called before the element is resized. The function receives the handle and the next values of x, y, width and height. If false is returned by any handler, the action will cancel.

<draggable-resizable-vue :onResize="onResizeCallback">


function onResizeStartCallback(handle, x, y, width, height){
   ...
   // return false; — for cancel
}