Hello World!
Vue Component for draggable and resizable elements.
Table of Contents
Demo
Not available for now
Features
- A lightweight, no-dependency
- All props are reactive
- Support touch events
- Use
- draggable
- resizable
- rotable
- or all of them
- Define sticks for resizing
- Define sticks for rotation
- Restrict size and movement to parent element
- Restrict drag to vertical or horizontal axis
- Handle draggable areas
- Resizable and draggable even with a defined angle
Install and basic usage
$ npm i -s vue-drag-resize-and-rotate
Register the component:
Vue
Use the component:
<template> <div id="app"> <VueDragResizeAndRotate :active="true" :w="200" :h="200" @resizing="change" @dragging="change" @rotating="change" :rotate="true"> <h3>Hello World!</h3> <p>{{ y }} х {{ x }} </p> <p>{{ w }} х {{ h }}</p> </VueDragResizeAndRotate> </div></template> <script> import VueDragResizeAndRotate from 'vue-drag-resize-and-rotate'; export default { name: 'app', components: { VueDragResizeAndRotate }, data() { return { w: 0, h: 0, x: 0 y: 0, } }, methods: { change(newRect) { this.w = newRect.w; this.h = newRect.h; this.x = newRect.x; this.y = newRect.y; } } }</script>
Props
active
Type: Boolean
Required: false
Default: false
Determines whether the component should be active.
draggable
Type: Boolean
Required: false
Default: true
Determines whether the component should be draggable.
resizable
Type: Boolean
Required: false
Default: true
Determines whether the component should be resizable.
grid
Type: Array
Required: false
Default: [0, 0]
Determines pixel distance beetween each drag
bounds
Type: Object
Required: false
Default: undefined
Limits the scope of the component's change to its parent size. Variable parameters can be set (none of them are required):
- parent:
Boolean
- top:
Number
- right:
Number
- bottom:
Number
- left:
Number
w
Type: Number
Required: false
Default: 200
Define the initial width of the component.
h
Type: Number
Required: false
Default: 200
Define the initial height of the component.
x
Type: Number
Required: false
Default: 0
Define the initial x position of the component.
y
Type: Number
Required: false
Default: 0
Define the initial y position of the component.
r
Type: Number
Required: false
Default: 0
Define the initial rotation angle in degrees of the component.
sticks
Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'ro']
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 leftro
- Rotation stick
axis
Type: String
Required: false
Default: xy
Define the axis on which the element is draggable. Available values are x
, y
, xy
. Other values are equivalent to none
dragHandle
Type: String
Required: false
Default: undefined
Defines the selector that should be used to drag the component.
dragCancel
Type: String
Required: false
Default: undefined
Defines a selector that should be used to prevent drag initialization.
dragCancel
Type: String
Required: false
Default: undefined
Defines a selector that should be used to prevent drag initialization.
Events
clicked
Required: false
Parameters: -
Called whenever the component gets clicked.
activated
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
deactivated
Required: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
resizing
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.
resizestop
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.
dragging
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.
dragstop
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.
Contributing
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:8081npm run start# distribution buildnpm run build