0
# Vue Draggable Resizable
1
2
Vue Draggable Resizable is a Vue 3 component that provides draggable and resizable functionality for DOM elements. It offers comprehensive customization options for styling, behavior, constraints, and event handling, making it ideal for building interactive dashboards, layout builders, and any application requiring movable and resizable UI elements.
3
4
## Package Information
5
6
- **Package Name**: vue-draggable-resizable
7
- **Package Type**: npm
8
- **Language**: JavaScript (Vue 3)
9
- **Installation**: `npm install vue-draggable-resizable`
10
11
## Core Imports
12
13
```javascript
14
import VueDraggableResizable from "vue-draggable-resizable";
15
import "vue-draggable-resizable/style.css";
16
```
17
18
For plugin installation:
19
20
```javascript
21
import { install } from "vue-draggable-resizable";
22
app.use({ install });
23
```
24
25
## Basic Usage
26
27
```vue
28
<template>
29
<div style="height: 500px; width: 500px; position: relative; border: 1px solid #ccc;">
30
<vue-draggable-resizable
31
:w="200"
32
:h="150"
33
:x="50"
34
:y="50"
35
:parent="true"
36
@dragging="onDrag"
37
@resizing="onResize"
38
>
39
<p>I can be dragged and resized!</p>
40
</vue-draggable-resizable>
41
</div>
42
</template>
43
44
<script>
45
import VueDraggableResizable from "vue-draggable-resizable";
46
import "vue-draggable-resizable/style.css";
47
48
export default {
49
components: {
50
VueDraggableResizable
51
},
52
methods: {
53
onDrag(left, top) {
54
console.log('Dragging to:', left, top);
55
},
56
onResize(left, top, width, height) {
57
console.log('Resizing to:', width, height, 'at:', left, top);
58
}
59
}
60
}
61
</script>
62
```
63
64
## Architecture
65
66
Vue Draggable Resizable is built around several key concepts:
67
68
- **Component State**: Internal reactive state tracking position, size, and interaction status
69
- **Event System**: Mouse and touch event handling with cross-platform compatibility
70
- **Constraint System**: Boundary checking, grid snapping, and aspect ratio preservation
71
- **Handle System**: Configurable resize handles with custom styling support
72
- **Callback System**: Extensive props and events for integration with parent components
73
74
## Capabilities
75
76
### Component Props
77
78
Core configuration options for behavior, styling, positioning, sizing, and constraints. The component accepts over 30 props covering all aspects of draggable and resizable behavior.
79
80
```javascript { .api }
81
// Positioning & Sizing Props
82
interface PositioningProps {
83
x: number; // Initial X position (default: 0)
84
y: number; // Initial Y position (default: 0)
85
w: number | string; // Initial width (default: 200, supports 'auto')
86
h: number | string; // Initial height (default: 200, supports 'auto')
87
z: number | string; // Z-index (default: 'auto')
88
}
89
90
// Constraint Props
91
interface ConstraintProps {
92
minWidth: number; // Minimum width (default: 0)
93
minHeight: number; // Minimum height (default: 0)
94
maxWidth: number; // Maximum width (default: null)
95
maxHeight: number; // Maximum height (default: null)
96
parent: boolean; // Constrain to parent bounds (default: false)
97
grid: [number, number]; // Grid snapping [x, y] (default: [1, 1])
98
axis: 'x' | 'y' | 'both'; // Drag axis constraint (default: 'both')
99
}
100
```
101
102
[Component Props](./component-props.md)
103
104
### Component Events
105
106
Event system providing real-time feedback for drag and resize operations, plus lifecycle events for component activation state.
107
108
```javascript { .api }
109
// Event Signatures
110
interface ComponentEvents {
111
// Lifecycle Events
112
activated(): void; // Component becomes active
113
deactivated(): void; // Component becomes inactive
114
'update:active'(active: boolean): void; // V-model support for active prop
115
116
// Drag Events
117
dragging(left: number, top: number): void; // During drag
118
dragStop(left: number, top: number): void; // Drag complete
119
120
// Resize Events
121
resizing(left: number, top: number, width: number, height: number): void; // During resize
122
resizeStop(left: number, top: number, width: number, height: number): void; // Resize complete
123
}
124
```
125
126
[Component Events](./component-events.md)
127
128
### Advanced Features
129
130
Advanced functionality including aspect ratio locking, handle customization, custom CSS classes, and programmatic control methods.
131
132
```javascript { .api }
133
// Advanced Configuration
134
interface AdvancedFeatures {
135
lockAspectRatio: boolean; // Maintain aspect ratio (default: false)
136
handles: HandleType[]; // Enabled resize handles
137
scale: number | [number, number]; // Parent element scale factor
138
dragHandle: string; // CSS selector for drag handle
139
dragCancel: string; // CSS selector to prevent dragging
140
}
141
142
// Programmatic Methods
143
interface ComponentMethods {
144
moveHorizontally(val: number): void; // Set horizontal position
145
moveVertically(val: number): void; // Set vertical position
146
changeWidth(val: number): void; // Set width
147
changeHeight(val: number): void; // Set height
148
}
149
150
// Handle Types
151
type HandleType = 'tl' | 'tm' | 'tr' | 'mr' | 'br' | 'bm' | 'bl' | 'ml';
152
```
153
154
[Advanced Features](./advanced-features.md)
155
156
## Types
157
158
```javascript { .api }
159
// Main Component Type
160
interface VueDraggableResizable {
161
// Component instance with all props, methods, and reactive state
162
}
163
164
// Handle Types
165
type HandleType = 'tl' | 'tm' | 'tr' | 'mr' | 'br' | 'bm' | 'bl' | 'ml';
166
167
// Callback Function Types
168
type DragStartCallback = (event: MouseEvent | TouchEvent) => boolean | void;
169
type DragCallback = (x: number, y: number) => boolean | void;
170
type ResizeStartCallback = (handle: HandleType, event: MouseEvent | TouchEvent) => boolean | void;
171
type ResizeCallback = (handle: HandleType, x: number, y: number, width: number, height: number) => boolean | void;
172
173
// Configuration Types
174
interface GridConfig {
175
0: number; // X grid size
176
1: number; // Y grid size
177
}
178
179
interface ScaleConfig {
180
0: number; // X scale factor
181
1: number; // Y scale factor
182
}
183
184
// Slot Types
185
interface Slot {
186
// Vue slot content
187
}
188
189
// Axis Constraint Type
190
type AxisType = 'x' | 'y' | 'both';
191
192
// Size Value Type
193
type SizeValue = number | 'auto';
194
195
// Z-Index Value Type
196
type ZIndexValue = number | 'auto';
197
198
// Event Types
199
interface MouseEvent extends Event {
200
clientX: number;
201
clientY: number;
202
// Standard MouseEvent properties
203
}
204
205
interface TouchEvent extends Event {
206
touches: TouchList;
207
// Standard TouchEvent properties
208
}
209
```