Top Related Projects
Vue drag-and-drop component based on Sortable.js
Vue3 Component for draggable and resizable elements.
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Quick Overview
Vue-drag-resize is a Vue.js component that allows for dragging and resizing of elements within a web application. It provides a flexible and customizable solution for creating resizable and draggable components, making it useful for building interactive user interfaces, layout editors, or any application requiring dynamic element manipulation.
Pros
- Easy integration with Vue.js projects
- Highly customizable with various props and events
- Supports both dragging and resizing functionalities
- Responsive and works well on different screen sizes
Cons
- Limited documentation and examples
- May have performance issues with a large number of draggable elements
- Lacks built-in touch support for mobile devices
- Some reported issues with z-index handling in complex layouts
Code Examples
- Basic usage:
<template>
<vue-drag-resize :w="100" :h="100" :x="0" :y="0">
<p>Resize and drag me!</p>
</vue-drag-resize>
</template>
<script>
import VueDragResize from 'vue-drag-resize';
export default {
components: {
VueDragResize,
},
};
</script>
- With custom styling and event handling:
<template>
<vue-drag-resize
:w="200"
:h="200"
:x="50"
:y="50"
:minw="100"
:minh="100"
:active="true"
class-name-active="my-active-class"
@resizing="onResize"
@dragging="onDrag"
>
<div>Custom content here</div>
</vue-drag-resize>
</template>
<script>
export default {
methods: {
onResize(x, y, width, height) {
console.log('Resizing', { x, y, width, height });
},
onDrag(x, y) {
console.log('Dragging', { x, y });
},
},
};
</script>
- Using v-for to create multiple draggable elements:
<template>
<div>
<vue-drag-resize
v-for="(item, index) in items"
:key="index"
:w="item.width"
:h="item.height"
:x="item.x"
:y="item.y"
:parent="true"
>
{{ item.content }}
</vue-drag-resize>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ width: 100, height: 100, x: 0, y: 0, content: 'Item 1' },
{ width: 150, height: 150, x: 120, y: 120, content: 'Item 2' },
{ width: 200, height: 200, x: 240, y: 240, content: 'Item 3' },
],
};
},
};
</script>
Getting Started
-
Install the package:
npm install vue-drag-resize
-
Import and use the component in your Vue file:
<template> <vue-drag-resize :w="200" :h="200" :x="0" :y="0"> <p>Drag and resize me!</p> </vue-drag-resize> </template> <script> import VueDragResize from 'vue-drag-resize'; export default { components: { VueDragResize, }, }; </script>
-
Customize the component using props and events as needed.
Competitor Comparisons
Vue drag-and-drop component based on Sortable.js
Pros of Vue.Draggable
- Supports drag-and-drop sorting functionality
- Integrates well with existing Vue.js list rendering
- Lightweight and easy to implement
Cons of Vue.Draggable
- Limited to list-based drag-and-drop operations
- Doesn't support resizing of elements
Code Comparison
Vue.Draggable:
<draggable v-model="myArray">
<div v-for="element in myArray" :key="element.id">
{{ element.name }}
</div>
</draggable>
vue-drag-resize:
<vue-drag-resize :w="100" :h="100" v-on:resizing="onResize" v-on:dragging="onDrag">
<h3>Resize Me</h3>
</vue-drag-resize>
Key Differences
- Vue.Draggable focuses on sortable lists, while vue-drag-resize emphasizes individual element manipulation
- vue-drag-resize offers both dragging and resizing capabilities for single elements
- Vue.Draggable is better suited for dynamic list management, while vue-drag-resize excels in layout customization
Use Cases
- Vue.Draggable: Ideal for creating sortable lists, such as to-do apps or priority queues
- vue-drag-resize: Perfect for building customizable dashboards or layout editors
Community and Support
- Vue.Draggable: Larger community, more frequent updates
- vue-drag-resize: Smaller but active community, less frequent updates
Performance Considerations
- Vue.Draggable: Generally efficient for list operations
- vue-drag-resize: May have performance impact with many resizable elements
Vue3 Component for draggable and resizable elements.
Pros of vue-draggable-resizable
- More comprehensive documentation and examples
- Supports touch events for mobile devices
- Offers a wider range of customization options
Cons of vue-draggable-resizable
- Larger bundle size due to more features
- Slightly steeper learning curve for advanced usage
Code Comparison
vue-draggable-resizable:
<vue-draggable-resizable
:w="100"
:h="100"
@dragging="onDrag"
@resizing="onResize"
>
<p>Hello World!</p>
</vue-draggable-resizable>
vue-drag-resize:
<vue-drag-resize
:isActive="true"
:w="100"
:h="100"
v-on:dragging="onDrag"
v-on:resizing="onResize"
>
<p>Hello World!</p>
</vue-drag-resize>
The code comparison shows that both components have similar basic usage, with minor differences in prop and event naming conventions. vue-draggable-resizable uses the @
shorthand for event binding, while vue-drag-resize uses v-on:
. Additionally, vue-drag-resize requires an isActive
prop to enable dragging and resizing.
Overall, vue-draggable-resizable offers more features and better documentation, making it suitable for complex projects. However, vue-drag-resize might be preferable for simpler use cases or when a smaller bundle size is crucial.
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 comprehensive set of features, including inertia and snapping
- 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 functionality
- Larger file size, which may impact performance for simpler projects
Code Comparison
vue-drag-resize:
<vue-drag-resize :isActive="true" :w="200" :h="200" v-on:resizing="onResize" v-on:dragging="onDrag">
<h3>Resize Me</h3>
</vue-drag-resize>
interact.js:
interact('.resize-drag')
.resizable({
edges: { left: true, right: true, bottom: true, top: true },
})
.draggable({
modifiers: [interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})]
})
Summary
vue-drag-resize is specifically designed for Vue.js applications, offering a simpler API and easier integration for Vue projects. It's more lightweight and focused on drag-and-resize functionality.
interact.js is a more versatile and powerful library, suitable for various JavaScript frameworks and vanilla JS projects. It provides a wider range of features but requires more setup and has a steeper learning curve.
Choose vue-drag-resize for quick implementation in Vue.js projects with basic drag-and-resize needs. Opt for interact.js when you need more advanced features or are working with different frameworks.
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Pros of react-sortable-hoc
- More comprehensive sorting functionality, including multi-list sorting and keyboard accessibility
- Better performance for large lists due to virtualization support
- More active development and community support
Cons of react-sortable-hoc
- Limited to sorting functionality, doesn't include resizing capabilities
- Steeper learning curve due to higher complexity and more configuration options
- React-specific, not suitable for Vue.js projects
Code Comparison
react-sortable-hoc:
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
const SortableItem = SortableElement(({value}) => <li>{value}</li>);
const SortableList = SortableContainer(({items}) => {
return (
<ul>
{items.map((value, index) => (
<SortableItem key={`item-${index}`} index={index} value={value} />
))}
</ul>
);
});
vue-drag-resize:
<template>
<vue-drag-resize :isActive="true" :w="200" :h="200" v-on:resizing="onResize" v-on:dragging="onDrag">
<h3>Hello World!</h3>
</vue-drag-resize>
</template>
<script>
import VueDragResize from 'vue-drag-resize';
export default {
components: {
VueDragResize
},
methods: {
onResize(x, y, width, height) {
// handle resize
},
onDrag(x, y) {
// handle drag
}
}
}
</script>
The code examples highlight the different focus areas of each library. react-sortable-hoc emphasizes list sorting functionality, while vue-drag-resize provides a component for dragging and resizing elements.
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
Vue-drag-resize
Vue Component for draggable and resizable elements.
Table of Contents
Demo
Features
- A lightweight, no-dependency
- All props are reactive
- Support touch events
- Snap element to custom grid
- Use draggable, resizable or both
- Define sticks for resizing
- Save aspect ratio for resizable components
- Restrict size and movement to parent element
- Restrict drag to vertical or horizontal axis
Install and basic usage
$ 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>
Props
isActive
Type: Boolean
Required: false
Default: false
Determines whether the component should be active.
ç¡®å®ç»ä»¶æ¯å¦åºå¤äºæ´»å¨ç¶æã
<vue-drag-resize :isActive="true">
preventActiveBehavior
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.
éè¿åå»ç»ä»¶å¹¶åå»ç»ä»¶åºåå¤é¨æ¥ç¦ç¨ç»ä»¶çè¡ä¸ºï¼isActiveï¼true / falseï¼ã
å¦æå¯ç¨äºpropï¼åç»ä»¶ä»
é¢åæå®çã
<vue-drag-resize :preventActiveBehavior="true">
parentW
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">
parentH
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">
parentScaleX
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.
å®ä¹åå§æ°´å¹³æ¯ä¾æç¶å
ç´ ãç¶çº§çtransform:scaleï¼ï¼csså®ä¹ä¸çå¼ç¸åã
æå¨/è°æ´å¤§å°åæç大å°å°ä½¿ç¨è¯¥å¼è®¡ç®ã
<vue-drag-resize :parentScaleX="0.5">
parentScaleY
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.
å®ä¹åå§åç´æ¯ä¾æç¶å
ç´ ãç¶çº§çtransform:scaleï¼ï¼csså®ä¹ä¸çå¼ç¸åã
æå¨/è°æ´å¤§å°åæç大å°å°ä½¿ç¨è¯¥å¼è®¡ç®ã
<vue-drag-resize :parentScaleY="0.5">
isDraggable
Type: Boolean
Required: false
Default: true
Determines whether the component should draggable.
ç¡®å®ç»ä»¶æ¯å¦åºå¯æå¨ã
<vue-drag-resize :isDraggable="false">
isResizable
Type: Boolean
Required: false
Default: true
Determines whether the component should resize.
ç¡®å®ç»ä»¶æ¯å¦åºè°æ´å¤§å°ã
<vue-drag-resize :isResizable="false">
parentLimitation
Type: Boolean
Required: false
Default: false
Limits the scope of the component's change to its parent size.
å°ç»ä»¶æ´æ¹çèå´éå¶ä¸ºå ¶ç¶å¤§å°ã
<vue-drag-resize :parentLimitation="true">
snapToGrid
Type: Boolean
Required: false
Default: false
Determines whether the component should move and resize in predefined steps.
<vue-drag-resize :snapToGrid="true">
gridX
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">
gridY
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">
aspectRatio
Type: Boolean
Required: false
Default: false
Determines whether the component should retain its proportions.
ç¡®å®ç»ä»¶æ¯å¦åºä¿æå ¶æ¯ä¾ã
<vue-drag-resize :aspectRatio="false">
w
Type: Number|String
Required: false
Default: 200
Define the initial width of the component.
The value can either be a number >= 0 or the string 'auto'.
If set to 'auto', the initial width value will be equal to the width of the content within the component.
å®ä¹ç»ä»¶çåå§å®½åº¦ã
<vue-drag-resize :w="200">
h
Type: Number|String
Required: false
Default: 200
Define the initial height of the component.
The value can either be a number >= 0 or the string 'auto'.
If set to 'auto', the initial height value will be equal to the height of the content within the component.
å®ä¹ç»ä»¶çåå§é«åº¦ã
<vue-drag-resize :h="200">
minw
Type: Number
Required: false
Default: 50
Define the minimal width of the component.
å®ä¹ç»ä»¶çåå§å®½åº¦ã
<vue-drag-resize :minw="50">
minh
Type: Number
Required: false
Default: 50
Define the minimal height of the component.
å®ä¹ç»ä»¶çæå°é«åº¦ã
<vue-drag-resize :minh="50">
x
Type: Number
Required: false
Default: 0
Define the initial x position of the component.
å®ä¹ç»ä»¶çåå§Xä½ç½®ã
<vue-drag-resize :x="0">
y
Type: Number
Required: false
Default: 0
Define the initial y position of the component.
å®ä¹ç»ä»¶çåå§Yä½ç½®ã
<vue-drag-resize :y="0">
z
Type: Number|String
Required: false
Default: auto
Define the zIndex of the component.
å®ä¹ç»ä»¶çzindex(å±çº§)ã
<vue-drag-resize :z="999">
stickSize
Type: Number
Required: false
Default 8
Define the sticks' size.
<vue-drag-resize :stickSize="12">
sticks
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']">
axis
Type: String
Required: false
Default: both
Define the axis on which the element is draggable. Available values are x
, y
, both
or none
.
å®ä¹å
ç´ å¯æå¨çè½´ã å¯ç¨å¼ä¸ºx
ï¼y
ï¼both
ænone
ã
<vue-drag-resize axis="x">
dragHandle
Type: String
Required: false
Defines the selector that should be used to drag the component.
å®ä¹åºè¯¥ç¨äºæå¨ç»ä»¶çéæ©å¨ã
<vue-drag-resize dragHandle=".drag">
dragCancel
Type: String
Required: false
Defines a selector that should be used to prevent drag initialization.
å®ä¹åºè¯¥ç¨äºé²æ¢æå¨åå§åçéæ©å¨ã
<vue-drag-resize dragCancel=".drag">
contentClass
Type: String
Required: false
Defines a class that is applied on the div with the class vdr
<vue-drag-resize contentClass="box-shaddow">
Events
clicked
Required: false
Parameters: Original event handler
Called whenever the component gets clicked.
åå»ç»ä»¶æ¶è°ç¨ã
<vue-drag-resize @clicked="onActivated">
activated
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
åå»ç»ä»¶æ¶è°ç¨ï¼ä»¥æ¾ç¤ºå¥æã
<vue-drag-resize @activated="onActivated">
deactivated
Required: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
æ¯å½ç¨æ·åå»ç»ä»¶å¤é¨çä»»ä½ä½ç½®æ¶è°ç¨ï¼ä»¥ä¾¿å°å ¶åç¨ã
<vue-drag-resize @deactivated="onDeactivated">
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.
æ¯å½ç»ä»¶è°æ´å¤§å°æ¶è°ç¨ã
<vue-drag-resize @resizing="onResizing">
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.
æ¯å½ç»ä»¶åæ¢è°æ´å¤§å°æ¶è°ç¨ã
<vue-drag-resize @resizestop="onResizstop">
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.
æ¯å½æå¨ç»ä»¶æ¶è°ç¨ã
<vue-drag-resize @dragging="onDragging">
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.
æ¯å½ç»ä»¶åæ¢æå¨æ¶è°ç¨ã
<vue-drag-resize @dragstop="onDragstop">
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:8081
npm run start
# distribution build
npm run build
License
Top Related Projects
Vue drag-and-drop component based on Sortable.js
Vue3 Component for draggable and resizable elements.
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
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