Repository files navigation

Vue Component for draggable and resizable elements.

If you are looking for the version 1 of the component, it is available on thev1 branch.

• Features
• Live Playground
• Install and basic usage
  • Props
  • Events
  • Styling
• Contributing
• License

• No dependencies
• Use draggable, resizable or both
• Define handles for resizing
• Restrict size and movement to parent element
• Snap element to custom grid
• Restrict drag to vertical or horizontal axis
• Maintain aspect ratio
• Touch enabled
• Use your own classes
• Provide your own markup for handles

For examples of the component go to thelive playground

Alternatively you can run the playground on your own computer:

• Clone this repository
• npm install
• npm run story:dev
• Visithttp://localhost:6006/

$ npm install --save vue-draggable-resizable

Register the component globally

// main.jsimport{createApp}from'vue'importVueDraggableResizablefrom'vue-draggable-resizable'importAppfrom'./App.vue'createApp(App).component("vue-draggable-resizable",VueDraggableResizable).mount('#app')

You may now use the component in your markup

// App.vue<template>  <divstyle="height:500px;width:500px;border:1pxsolidred;position:relative;">    <vue-draggable-resizable:w="100":h="100":parent="true">      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.</p>    </vue-draggable-resizable>  </div></template>

The component itself does not include any CSS. You'll need to include it separately in yourApp.vue:

<style>@import"vue-draggable-resizable/style.css";</style>

Type:String
Required:false
Default:vdr

Used to set the customclass of a draggable-resizable component.

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

Type:String
Required:false
Default:draggable

Used to set the customclass of a draggable-resizable component whendraggable is enable.

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

Type:String
Required:false
Default:resizable

Used to set the customclass of a draggable-resizable component whenresizable is enable.

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

Type:String
Required:false
Default:dragging

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

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

Type:String
Required:false
Default:resizing

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

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

Type:String
Required:false
Default:active

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

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

Type:String
Required:false
Default:handle

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

So for example, this component:

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

renders the following:

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

Type:Number|Array
Required:false
Default:1

Thescale prop controls the scale property when the CSS 3scale transformation is applied to one of the parent elements. If not provided the default value is 1.

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

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 tofalse.

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

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 totrue.

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

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 thesyncmodifier to keep the state in sync with the parent. You can use along with thepreventDeactivation prop in order to fully control the active behavior from outside the component.

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

Type:Boolean
Required:false
Default:false

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

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

Type:Boolean
Required:false
Default:true

Defines it the component should be draggable or not.

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

Type:Boolean
Required:false
Default:true

Defines it the component should be resizable or not.

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

Type:Number|String
Required:false
Default:200

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

<vue-draggable-resizable:w="200">

Type:Number|String
Required:false
Default:200

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

<vue-draggable-resizable:h="200">

Type:Number
Required:false
Default:50

Define the minimal width of the element.

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

Type:Number
Required:false
Default:50

Define the minimal height of the element.

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

Type:Number
Required:false
Default:null

Define the maximum width of the element.

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

Type:Number
Required:false
Default:null

Define the maximum height of the element.

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

Type:Number
Required:false
Default:0

Define the initial x position of the element.

<vue-draggable-resizable:x="0">

Type:Number
Required:false
Default:0

Define the initial y position of the element.

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

Type:Number|String
Required:false
Default:auto

Define the z-index of the element.

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

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

<vue-draggable-resizable:handles="['tm','bm','ml','mr']">

Type:String
Required:false
Default:both

Define the axis on which the element is draggable. Available values arex,y orboth.

<vue-draggable-resizableaxis="x">

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

Define the grid on which the element is snapped.

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

Type:Boolean
Required:false
Default:false

Restricts the movement and the dimensions of the component to the parent.

<vue-draggable-resizable:parent="true">

Type:String
Required:false

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

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

Type:String
Required:false

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

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

Type:Boolean
Required:false
Default:false

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

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

Type:Function
Required:false
Default:null

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

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

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

Type:Function
Required:false
Default:null

Called before the element is dragged. The function receives the next values ofx andy. Iffalse is returned by any handler, the action will cancel.

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

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

Type:Function
Required:false
Default:null

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

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

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

Type:Function
Required:false
Default:null

Called before the element is resized. The function receives the handle and the next values ofx,y,width andheight. Iffalse is returned by any handler, the action will cancel.

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

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

Parameters:-

Called whenever the component gets clicked, in order to show handles.

<vue-draggable-resizable@activated="onActivated">

Parameters:-

Called whenever the user clicks anywhere outside the component, in order to deactivate it.

<vue-draggable-resizable@deactivated="onDeactivated">

Parameters:

• left the X position of the element
• top the Y position of the element
• width the width of the element
• height the height of the element

Called whenever the component gets resized.

<vue-draggable-resizable@resizing="onResizing">

Parameters:

• left the X position of the element
• top the Y position of the element
• width the width of the element
• height the height of the element

Called whenever the component stops getting resized.

<vue-draggable-resizable@resizestop="onResizestop">

Parameters:

• left the X position of the element
• top the Y position of the element

Called whenever the component gets dragged.

<vue-draggable-resizable@dragging="onDragging">

Parameters:

• left the X position of the element
• top the Y position of the element

Called whenever the component stops getting dragged.

<vue-draggable-resizable@dragstop="onDragstop">

You can style the component using appropriate class names passed as props to the component. Moreover you can replace the default styles for the handles, provided in the source filevue-draggable-resizable.css, but you should take care to define position and size for them. The default classes for handles arehandle andhandle-tl,handle-br and so on.

The component also providesnamed slots for each handle, so you can use your markup inside each one.

Thanks to @kirillmurashov for his work onvue-drag-resize component.

If you discover any security related issues, please emailmaurizio.bonani@gmail.com instead of using the issue tracker.

Any contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.

# serve with hot reload at localhost:8080npm run dev# distribution buildnpm run build# build the histoire docsnpm run story:build# run testsnpm runtest# run histoire at localhost:6006npm run story:dev

The MIT License (MIT). Please seeLicense File for more information.