Vue Component for draggable and resizable elements.
$ npm i -s vue-drag-resize
Register the component:
import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'
Vue.component('vue-drag-resize', VueDragResize)
Use the component:
<template>
<div id="app">
<VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
<h3>Hello World!</h3>
<p>{{ top }} х {{ left }} </p>
<p>{{ width }} х {{ height }}</p>
</VueDragResize>
</div>
</template>
<script>
import VueDragResize from 'vue-drag-resize';
export default {
name: 'app',
components: {
VueDragResize
},
data() {
return {
width: 0,
height: 0,
top: 0,
left: 0
}
},
methods: {
resize(newRect) {
this.width = newRect.width;
this.height = newRect.height;
this.top = newRect.top;
this.left = newRect.left;
}
}
}
</script>
Type: Boolean
Required: false
Default: false
Determines whether the component should be active.
<vue-drag-resize :isActive="true">
Type: Boolean
Required: false
Default: false
Disable behavior of the component by clicking on it and clicking outside the component’s area (isActive: true / false). If the prop is enabled, the component is oriented only to the specified.
<vue-drag-resize :preventActiveBehavior="true">
Type: Number
Required: false
Default: 0
Define the initial width of the parent element. If not specified it calculated automatically. With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.
<vue-drag-resize :parentW="2000">
Type: Number
Required: false
Default: 0
Define the initial height of the parent element. If not specified it calculated automatically. With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.
<vue-drag-resize :parentH="2000">
Type: Number
Required: false
Default: 1
Define the initial horizontal scale or the parent element. Same value in parent’s transform: scale() css definition. The drag/resize and the sticks’ sizes will computed with this value.
<vue-drag-resize :parentScaleX="0.5">
Type: Number
Required: false
Default: 1
Define the initial vertical scale or the parent element. Same value in parent’s transform: scale() css definition. The drag/resize and the sticks’ sizes will computed with this value.
<vue-drag-resize :parentScaleY="0.5">
Type: Boolean
Required: false
Default: true
Determines whether the component should draggable.
<vue-drag-resize :isDraggable="false">
Type: Boolean
Required: false
Default: true
Determines whether the component should resize.
<vue-drag-resize :isResizable="false">
Type: Boolean
Required: false
Default: false
Limits the scope of the component’s change to its parent size.
<vue-drag-resize :parentLimitation="true">
Type: Boolean
Required: false
Default: false
Determines whether the component should move and resize in predefined steps.
<vue-drag-resize :snapToGrid="true">
Type: Number
Required: false
Default: 50
Define the grid step size for the horizontal axis. Both sides of the component (left and right) will snap to this step.
<vue-drag-resize :snapToGrid="true" :gridX="20">
Type: Number
Required: false
Default: 50
Define the grid step size for the vertical axis. Both sides of the component (top and bottom) will snap to this step.
<vue-drag-resize :snapToGrid="true" :gridY="20">
Type: Boolean
Required: false
Default: false
Determines whether the component should retain its proportions.
<vue-drag-resize :aspectRatio="false">
Type: Number
Required: false
Default: 200
Define the initial width of the component.
<vue-drag-resize :w="200">
Type: Number
Required: false
Default: 200
Define the initial height of the component.
<vue-drag-resize :h="200">
Type: Number
Required: false
Default: 50
Define the minimal width of the component.
<vue-drag-resize :minw="50">
Type: Number
Required: false
Default: 50
Define the minimal height of the component.
<vue-drag-resize :minh="50">
Type: Number
Required: false
Default: 0
Define the initial x position of the component.
<vue-drag-resize :x="0">
Type: Number
Required: false
Default: 0
Define the initial y position of the component.
<vue-drag-resize :y="0">
Type: Number|String
Required: false
Default: auto
Define the zIndex of the component.
<vue-drag-resize :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 lefttm
- Top middletr
- Top rightmr
- Middle rightbr
- Bottom rightbm
- Bottom middlebl
- Bottom leftml
- Middle left<vue-drag-resize :sticks="['tm','bm','ml','mr']">
Type: String
Required: false
Default: both
Define the axis on which the element is draggable. Available values are x
, y
, both
or none
.
<vue-drag-resize axis="x">
Type: String
Required: false
Defines the selector that should be used to drag the component.
<vue-drag-resize dragHandle=".drag">
Type: String
Required: false
Defines a selector that should be used to prevent drag initialization.
<vue-drag-resize dragCancel=".drag">
Required: false
Parameters: Original event handler
Called whenever the component gets clicked.
<vue-drag-resize @clicked="onActivated">
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
<vue-drag-resize @activated="onActivated">
Required: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
<vue-drag-resize @deactivated="onDeactivated">
Required: false
Parameters: object
{
left: Number, //the X position of the component
top: Number, //the Y position of the component
width: Number, //the width of the component
height: Number //the height of the component
}
Called whenever the component gets resized.
<vue-drag-resize @resizing="onResizing">
Required: false
Parameters: object
{
left: Number, //the X position of the component
top: Number, //the Y position of the component
width: Number, //the width of the component
height: Number //the height of the component
}
Called whenever the component stops getting resized.
<vue-drag-resize @resizestop="onResizstop">
Required: false
Parameters: object
{
left: Number, //the X position of the component
top: Number, //the Y position of the component
width: Number, //the width of the component
height: Number //the height of the component
}
Called whenever the component gets dragged.
<vue-drag-resize @dragging="onDragging">
Required: false
Parameters: object
{
left: Number, //the X position of the component
top: Number, //the Y position of the component
width: Number, //the width of the component
height: Number //the height of the component
}
Called whenever the component stops getting dragged.
<vue-drag-resize @dragstop="onDragstop">
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:8081
npm run start
# distribution build
npm run build
Author: kirillmurashov
Live Demo: http://kirillmurashov.com/vue-drag-resize
GitHub: https://github.com/kirillmurashov/vue-drag-resize
#vue #javascript #vuejs #vue-js