Top Related Projects
Vue drag-and-drop component based on Sortable.js
Vue2 && Vue3 Component for resize and drag elements
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
Quick Overview
Vue Draggable Resizable is a Vue.js component that allows for dragging and resizing of elements within a container. It provides a flexible and customizable solution for creating interactive user interfaces where elements can be freely moved and resized by the user.
Pros
- Easy integration with Vue.js projects
- Highly customizable with numerous props and events
- Supports both dragging and resizing functionalities
- Responsive and works well on different screen sizes
Cons
- Limited documentation for advanced use cases
- May require additional styling to fit specific design requirements
- Performance can degrade with a large number of draggable/resizable elements
- Some users report issues with z-index handling in complex layouts
Code Examples
- Basic usage:
<template>
<vue-draggable-resizable :w="100" :h="100" @dragging="onDrag" @resizing="onResize">
<p>Hello World!</p>
</vue-draggable-resizable>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
components: {
VueDraggableResizable
},
methods: {
onDrag(x, y) {
console.log('Dragging', x, y)
},
onResize(x, y, width, height) {
console.log('Resizing', x, y, width, height)
}
}
}
</script>
- With grid snapping:
<template>
<vue-draggable-resizable :grid=[20,20] :snap-to-grid="true">
<p>Snap to grid!</p>
</vue-draggable-resizable>
</template>
- With parent boundaries:
<template>
<div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
<vue-draggable-resizable :parent="true">
<p>Constrained to parent</p>
</vue-draggable-resizable>
</div>
</template>
Getting Started
-
Install the package:
npm install vue-draggable-resizable
-
Import and use in your Vue component:
<template> <vue-draggable-resizable> <p>Drag me!</p> </vue-draggable-resizable> </template> <script> import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizable.css' export default { components: { VueDraggableResizable } } </script>
-
Customize as needed using props and events.
Competitor Comparisons
Vue drag-and-drop component based on Sortable.js
Pros of Vue.Draggable
- Focuses on sortable functionality, making it more lightweight and specialized
- Integrates seamlessly with Vue.js, providing a smooth developer experience
- Supports nested draggable elements, allowing for complex hierarchical structures
Cons of Vue.Draggable
- Lacks built-in resizing functionality, which vue-draggable-resizable offers
- May require additional plugins or components for more advanced features like resizing or rotation
Code Comparison
Vue.Draggable:
<template>
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
<div v-for="element in myArray" :key="element.id">{{ element.name }}</div>
</draggable>
</template>
vue-draggable-resizable:
<template>
<vue-draggable-resizable :w="100" :h="100" @dragging="onDrag" @resizing="onResize">
<p>Hello! I'm a flexible component. You can drag and resize me.</p>
</vue-draggable-resizable>
</template>
The code examples showcase the primary differences in usage. Vue.Draggable focuses on sortable lists, while vue-draggable-resizable emphasizes individual element manipulation with both dragging and resizing capabilities.
Vue2 && Vue3 Component for resize and drag elements
Pros of vue-drag-resize
- Supports both Vue 2 and Vue 3, offering broader compatibility
- Provides more customization options for handles and grid snapping
- Includes touch event support for mobile devices
Cons of vue-drag-resize
- Less actively maintained, with fewer recent updates
- Documentation is not as comprehensive as vue-draggable-resizable
- Smaller community and fewer reported issues/solutions
Code Comparison
vue-drag-resize:
<vue-drag-resize :isActive="true" :w="200" :h="200" v-on:resizing="onResize" v-on:dragging="onDrag">
<h3>Hello World!</h3>
</vue-drag-resize>
vue-draggable-resizable:
<vue-draggable-resizable :w="200" :h="200" @resizing="onResize" @dragging="onDrag">
<h3>Hello World!</h3>
</vue-draggable-resizable>
The code structure is similar, with minor differences in prop names and event handling. vue-drag-resize uses isActive
prop and v-on
for events, while vue-draggable-resizable uses the @
shorthand for events.
Both libraries offer similar core functionality for creating draggable and resizable components in Vue applications. The choice between them depends on specific project requirements, desired customization options, and the need for Vue 3 support.
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
Pros of interact.js
- Framework-agnostic, can be used with any JavaScript project
- More extensive features, including inertia, snapping, and multi-touch gestures
- Larger community and more frequent updates
Cons of interact.js
- Steeper learning curve due to more complex API
- Requires more setup and configuration for basic drag-and-resize functionality
- Larger file size, which may impact performance for simpler projects
Code Comparison
vue-draggable-resizable:
<vue-draggable-resizable
:w="100"
:h="100"
@dragging="onDrag"
@resizing="onResize"
>
<p>Hello!</p>
</vue-draggable-resizable>
interact.js:
interact('.draggable')
.draggable({
listeners: {
move (event) {
console.log(event.dx, event.dy)
}
}
})
Summary
interact.js offers more flexibility and features but requires more setup, while vue-draggable-resizable provides a simpler, Vue-specific solution with less configuration needed. The choice between the two depends on project requirements, framework preferences, and desired level of customization.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
VueDraggableResizable 3
Vue Component for draggable and resizable elements.
If you are looking for the version 1 of the component, it is available on the v1 branch.
Table of Contents
Features
- 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
Live Playground
For examples of the component go to the live playground
Alternatively you can run the playground on your own computer:
- Clone this repository
npm install
npm run story:dev
- Visit http://localhost:6006/
Install and basic usage
$ npm install --save vue-draggable-resizable
Register the component globally
// main.js
import { createApp } from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
import App from './App.vue'
createApp(App)
.component("vue-draggable-resizable", VueDraggableResizable)
.mount('#app')
You may now use the component in your markup
// App.vue
<template>
<div style="height: 500px; width: 500px; border: 1px solid red; 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 your App.vue
:
<style>
@import "vue-draggable-resizable/style.css";
</style>
Props
className
Type: String
Required: false
Default: vdr
Used to set the custom class
of a draggable-resizable component.
<vue-draggable-resizable class-name="my-class">
classNameDraggable
Type: String
Required: false
Default: draggable
Used to set the custom class
of a draggable-resizable component when draggable
is enable.
<vue-draggable-resizable class-name-draggable="my-draggable-class">
classNameResizable
Type: String
Required: false
Default: resizable
Used to set the custom class
of a draggable-resizable component when resizable
is enable.
<vue-draggable-resizable class-name-resizable="my-resizable-class">
classNameDragging
Type: String
Required: false
Default: dragging
Used to set the custom class
of a draggable-resizable component when is dragging.
<vue-draggable-resizable class-name-dragging="my-dragging-class">
classNameResizing
Type: String
Required: false
Default: resizing
Used to set the custom class
of a draggable-resizable component when is resizing.
<vue-draggable-resizable class-name-resizing="my-resizing-class">
classNameActive
Type: String
Required: false
Default: active
Used to set the custom class
of a draggable-resizable component when is active.
<vue-draggable-resizable class-name-active="my-active-class">
classNameHandle
Type: String
Required: false
Default: 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:
<vue-draggable-resizable class-name-handle="my-handle-class"></vue-draggable-resizable>
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>
scale
Type: Number|Array
Required: false
Default: 1
The scale
prop controls the scale property when the CSS 3 scale 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]">
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
.
<vue-draggable-resizable :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
.
<vue-draggable-resizable :enable-native-drag="true">
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
modifier 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.
<vue-draggable-resizable :active="true">
preventDeactivation
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">
draggable
Type: Boolean
Required: false
Default: true
Defines it the component should be draggable or not.
<vue-draggable-resizable :draggable="false">
resizable
Type: Boolean
Required: false
Default: true
Defines it the component should be resizable or not.
<vue-draggable-resizable :resizable="false">
w
Type: Number|String
Required: false
Default: 200
Define the initial width of the element. It also supports auto
, but when you start resizing the value will fallback to a number.
<vue-draggable-resizable :w="200">
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.
<vue-draggable-resizable :h="200">
minWidth
Type: Number
Required: false
Default: 50
Define the minimal width of the element.
<vue-draggable-resizable :min-width="50">
minHeight
Type: Number
Required: false
Default: 50
Define the minimal height of the element.
<vue-draggable-resizable :min-height="50">
maxWidth
Type: Number
Required: false
Default: null
Define the maximum width of the element.
<vue-draggable-resizable :max-width="400">
maxHeight
Type: Number
Required: false
Default: null
Define the maximum height of the element.
<vue-draggable-resizable :max-height="50">
x
Type: Number
Required: false
Default: 0
Define the initial x position of the element.
<vue-draggable-resizable :x="0">
y
Type: Number
Required: false
Default: 0
Define the initial y position of the element.
<vue-draggable-resizable :y="0">
z
Type: Number|String
Required: false
Default: auto
Define the z-index of the element.
<vue-draggable-resizable :z="999">
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 lefttm
- Top middletr
- Top rightmr
- Middle rightbr
- Bottom rightbm
- Bottom middlebl
- Bottom leftml
- Middle left
<vue-draggable-resizable :handles="['tm','bm','ml','mr']">
axis
Type: String
Required: false
Default: both
Define the axis on which the element is draggable. Available values are x
, y
or both
.
<vue-draggable-resizable axis="x">
grid
Type: Array
Required: false
Default: [1,1]
Define the grid on which the element is snapped.
<vue-draggable-resizable :grid="[1,1]">
parent
Type: Boolean
Required: false
Default: false
Restricts the movement and the dimensions of the component to the parent.
<vue-draggable-resizable :parent="true">
dragHandle
Type: String
Required: false
Defines the selector that should be used to drag the component.
<vue-draggable-resizable drag-handle=".drag">
dragCancel
Type: String
Required: false
Defines a selector that should be used to prevent drag initialization.
<vue-draggable-resizable drag-cancel=".drag">
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.
<vue-draggable-resizable :lock-aspect-ratio="true">
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.
<vue-draggable-resizable :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.
<vue-draggable-resizable :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.
<vue-draggable-resizable :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.
<vue-draggable-resizable :onResize="onResizeCallback">
function onResizeStartCallback(handle, x, y, width, height){
...
// return false; â for cancel
}
Events
activated
Parameters: -
Called whenever the component gets clicked, in order to show handles.
<vue-draggable-resizable @activated="onActivated">
deactivated
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
<vue-draggable-resizable @deactivated="onDeactivated">
resizing
Parameters:
left
the X position of the elementtop
the Y position of the elementwidth
the width of the elementheight
the height of the element
Called whenever the component gets resized.
<vue-draggable-resizable @resizing="onResizing">
resizestop
Parameters:
left
the X position of the elementtop
the Y position of the elementwidth
the width of the elementheight
the height of the element
Called whenever the component stops getting resized.
<vue-draggable-resizable @resizestop="onResizestop">
dragging
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component gets dragged.
<vue-draggable-resizable @dragging="onDragging">
dragstop
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component stops getting dragged.
<vue-draggable-resizable @dragstop="onDragstop">
Styling
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 file vue-draggable-resizable.css
, but you should take care to define position and size for them. The default classes for handles are handle
and handle-tl
, handle-br
and so on.
The component also provides named slots for each handle, so you can use your markup inside each one.
Thanks
Thanks to @kirillmurashov for his work on vue-drag-resize component.
Security
If you discover any security related issues, please email maurizio.bonani@gmail.com instead of using the issue tracker.
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:8080
npm run dev
# distribution build
npm run build
# build the histoire docs
npm run story:build
# run tests
npm run test
# run histoire at localhost:6006
npm run story:dev
License
The MIT License (MIT). Please see License File for more information.
Top Related Projects
Vue drag-and-drop component based on Sortable.js
Vue2 && Vue3 Component for resize and drag elements
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot