0
# Component Props
1

2
Comprehensive configuration options for Vue Draggable Resizable component behavior, styling, positioning, sizing, and constraints.
3

4
## Capabilities
5

6
### Styling Props
7

8
Control the CSS classes applied to the component in different states.
9

10
```javascript { .api }
11
/**
12
 * Styling configuration props for customizing component appearance
13
 */
14
interface StylingProps {
15
  /** Base CSS class for the component (default: 'vdr') */
16
  className: string;
17
  
18
  /** CSS class when draggable is enabled (default: 'draggable') */
19
  classNameDraggable: string;
20
  
21
  /** CSS class when resizable is enabled (default: 'resizable') */
22
  classNameResizable: string;
23
  
24
  /** CSS class applied during dragging (default: 'dragging') */
25
  classNameDragging: string;
26
  
27
  /** CSS class applied during resizing (default: 'resizing') */
28
  classNameResizing: string;
29
  
30
  /** CSS class when component is active (default: 'active') */
31
  classNameActive: string;
32
  
33
  /** Base CSS class for resize handles (default: 'handle') */
34
  classNameHandle: string;
35
}
36
```
37

38
**Usage Examples:**
39

40
```vue
41
<template>
42
  <!-- Custom CSS classes -->
43
  <vue-draggable-resizable
44
    class-name="my-draggable"
45
    class-name-active="my-active"
46
    class-name-handle="my-handle"
47
  >
48
    Content here
49
  </vue-draggable-resizable>
50
</template>
51

52
<style>
53
.my-draggable {
54
  border: 2px solid blue;
55
}
56
.my-active {
57
  border-color: red;
58
}
59
.my-handle {
60
  background: green;
61
}
62
</style>
63
```
64

65
### Behavior Control Props
66

67
Enable or disable core functionality and control component interaction behavior.
68

69
```javascript { .api }
70
/**
71
 * Behavior control props for component interaction
72
 */
73
interface BehaviorProps {
74
  /** Whether component is initially active (default: false) */
75
  active: boolean;
76
  
77
  /** Prevent deactivation when clicking outside (default: false) */
78
  preventDeactivation: boolean;
79
  
80
  /** Enable dragging functionality (default: true) */
81
  draggable: boolean;
82
  
83
  /** Enable resizing functionality (default: true) */
84
  resizable: boolean;
85
  
86
  /** Disable text selection during drag (default: true) */
87
  disableUserSelect: boolean;
88
  
89
  /** Enable browser native drag functionality (default: false) */
90
  enableNativeDrag: boolean;
91
}
92
```
93

94
**Usage Examples:**
95

96
```vue
97
<template>
98
  <!-- Resizable only, no dragging -->
99
  <vue-draggable-resizable
100
    :draggable="false"
101
    :resizable="true"
102
    :active="true"
103
    :prevent-deactivation="true"
104
  >
105
    I can only be resized
106
  </vue-draggable-resizable>
107
  
108
  <!-- Draggable only, no resizing -->
109
  <vue-draggable-resizable
110
    :draggable="true"
111
    :resizable="false"
112
  >
113
    I can only be dragged
114
  </vue-draggable-resizable>
115
</template>
116
```
117

118
### Positioning & Sizing Props
119

120
Control initial position, size, and z-index of the component.
121

122
```javascript { .api }
123
/**
124
 * Positioning and sizing props for component dimensions and location
125
 */
126
interface PositionSizeProps {
127
  /** Initial X position in pixels (default: 0) */
128
  x: number;
129
  
130
  /** Initial Y position in pixels (default: 0) */
131
  y: number;
132
  
133
  /** Initial width in pixels or 'auto' (default: 200) */
134
  w: number | 'auto';
135
  
136
  /** Initial height in pixels or 'auto' (default: 200) */
137
  h: number | 'auto';
138
  
139
  /** Z-index value or 'auto' (default: 'auto') */
140
  z: number | 'auto';
141
}
142
```
143

144
**Usage Examples:**
145

146
```vue
147
<template>
148
  <!-- Positioned element with auto dimensions -->
149
  <vue-draggable-resizable
150
    :x="100"
151
    :y="50"
152
    w="auto"
153
    h="auto"
154
    :z="999"
155
  >
156
    <div style="padding: 20px;">Auto-sized content</div>
157
  </vue-draggable-resizable>
158
  
159
  <!-- Fixed size positioned element -->
160
  <vue-draggable-resizable
161
    :x="200"
162
    :y="100"
163
    :w="300"
164
    :h="200"
165
  >
166
    300x200 element
167
  </vue-draggable-resizable>
168
</template>
169
```
170

171
### Constraint Props
172

173
Define size and position constraints to limit component behavior.
174

175
```javascript { .api }
176
/**
177
 * Constraint props for limiting component size and position
178
 */
179
interface ConstraintProps {
180
  /** Minimum width in pixels (default: 0) */
181
  minWidth: number;
182
  
183
  /** Minimum height in pixels (default: 0) */
184
  minHeight: number;
185
  
186
  /** Maximum width in pixels (default: null - no limit) */
187
  maxWidth: number | null;
188
  
189
  /** Maximum height in pixels (default: null - no limit) */
190
  maxHeight: number | null;
191
  
192
  /** Constrain movement and size to parent element (default: false) */
193
  parent: boolean;
194
  
195
  /** Grid snapping intervals [x, y] (default: [1, 1]) */
196
  grid: [number, number];
197
  
198
  /** Restrict drag to axis: 'x', 'y', or 'both' (default: 'both') */
199
  axis: 'x' | 'y' | 'both';
200
}
201
```
202

203
**Usage Examples:**
204

205
```vue
206
<template>
207
  <div style="width: 800px; height: 600px; position: relative; border: 1px solid #ccc;">
208
    <!-- Constrained to parent with size limits -->
209
    <vue-draggable-resizable
210
      :parent="true"
211
      :min-width="100"
212
      :min-height="80"
213
      :max-width="400"
214
      :max-height="300"
215
      :grid="[20, 20]"
216
    >
217
      Constrained element
218
    </vue-draggable-resizable>
219
    
220
    <!-- Horizontal drag only -->
221
    <vue-draggable-resizable
222
      axis="x"
223
      :y="200"
224
      :w="150"
225
      :h="100"
226
    >
227
      Horizontal only
228
    </vue-draggable-resizable>
229
  </div>
230
</template>
231
```
232

233
### Advanced Configuration Props
234

235
Advanced behavior modification including aspect ratio, scaling, and handle customization.
236

237
```javascript { .api }
238
/**
239
 * Advanced configuration props for specialized behavior
240
 */
241
interface AdvancedProps {
242
  /** Maintain aspect ratio during resize (default: false) */
243
  lockAspectRatio: boolean;
244
  
245
  /** Scale factor for parent transforms - number or [x, y] (default: 1) */
246
  scale: number | [number, number];
247
  
248
  /** Array of enabled resize handles (default: all 8 handles) */
249
  handles: HandleType[];
250
  
251
  /** CSS selector for elements that act as drag handles */
252
  dragHandle?: string;
253
  
254
  /** CSS selector for elements that prevent dragging */
255
  dragCancel?: string;
256
}
257

258
/** Available resize handle positions */
259
type HandleType = 'tl' | 'tm' | 'tr' | 'mr' | 'br' | 'bm' | 'bl' | 'ml';
260
```
261

262
**Usage Examples:**
263

264
```vue
265
<template>
266
  <!-- Aspect ratio locked with limited handles -->
267
  <vue-draggable-resizable
268
    :lock-aspect-ratio="true"
269
    :handles="['br', 'tr', 'mr']"
270
    :w="200"
271
    :h="150"
272
  >
273
    Aspect ratio preserved
274
  </vue-draggable-resizable>
275
  
276
  <!-- Custom drag handle -->
277
  <vue-draggable-resizable
278
    drag-handle=".drag-me"
279
    drag-cancel=".no-drag"
280
  >
281
    <div class="drag-me" style="cursor: move; background: #eee; padding: 10px;">
282
      Drag here
283
    </div>
284
    <div class="no-drag">
285
      Can't drag this part
286
    </div>
287
  </vue-draggable-resizable>
288
  
289
  <!-- Scaled parent handling -->
290
  <div style="transform: scale(0.8);">
291
    <vue-draggable-resizable :scale="0.8">
292
      Handles parent scaling
293
    </vue-draggable-resizable>
294
  </div>
295
</template>
296
```
297

298
### Callback Props
299

300
Function props that allow intercepting and controlling drag/resize operations. These callbacks are invoked during interaction and can prevent or modify behavior by returning false.
301

302
```javascript { .api }
303
/**
304
 * Callback props for controlling drag and resize behavior
305
 */
306
interface CallbackProps {
307
  /** 
308
   * Called before drag starts - return false to cancel drag operation
309
   * @param event - The originating mouse or touch event
310
   * @returns boolean | void - Return false to prevent dragging
311
   * @default () => true
312
   */
313
  onDragStart?: (event: MouseEvent | TouchEvent) => boolean | void;
314
  
315
  /** 
316
   * Called during drag with new position - return false to cancel current movement
317
   * @param x - New X position in pixels
318
   * @param y - New Y position in pixels  
319
   * @returns boolean | void - Return false to cancel this drag movement
320
   * @default () => true
321
   */
322
  onDrag?: (x: number, y: number) => boolean | void;
323
  
324
  /** 
325
   * Called before resize starts - return false to cancel resize operation
326
   * @param handle - The resize handle being used
327
   * @param event - The originating mouse or touch event
328
   * @returns boolean | void - Return false to prevent resizing
329
   * @default () => true
330
   */
331
  onResizeStart?: (handle: HandleType, event: MouseEvent | TouchEvent) => boolean | void;
332
  
333
  /** 
334
   * Called during resize with new dimensions - return false to cancel current resize
335
   * @param handle - The resize handle being used
336
   * @param x - New X position in pixels
337
   * @param y - New Y position in pixels
338
   * @param width - New width in pixels
339
   * @param height - New height in pixels
340
   * @returns boolean | void - Return false to cancel this resize movement
341
   * @default () => true
342
   */
343
  onResize?: (handle: HandleType, x: number, y: number, width: number, height: number) => boolean | void;
344
}
345
```
346

347
**Usage Examples:**
348

349
```vue
350
<template>
351
  <vue-draggable-resizable
352
    :on-drag-start="checkDragStart"
353
    :on-drag="constrainDrag"
354
    :on-resize-start="checkResizeStart"
355
    :on-resize="validateResize"
356
  >
357
    Controlled element
358
  </vue-draggable-resizable>
359
</template>
360

361
<script>
362
export default {
363
  data() {
364
    return {
365
      isDragLocked: false,
366
      minArea: 5000,
367
      maxBounds: { x: 500, y: 400 }
368
    };
369
  },
370
  methods: {
371
    checkDragStart(event) {
372
      console.log('Drag starting:', event.type);
373
      // Return false to prevent dragging based on conditions
374
      if (this.isDragLocked) {
375
        console.log('Drag prevented - element is locked');
376
        return false;
377
      }
378
      return true;
379
    },
380
    
381
    constrainDrag(x, y) {
382
      // Only allow dragging within certain bounds
383
      if (x < 0 || y < 0 || x > this.maxBounds.x || y > this.maxBounds.y) {
384
        console.log('Drag constrained:', x, y);
385
        return false; // Cancel this drag movement
386
      }
387
    },
388
    
389
    checkResizeStart(handle, event) {
390
      console.log('Resize starting with handle:', handle);
391
      // Allow resize only on weekdays (example business logic)
392
      const isWeekday = new Date().getDay() >= 1 && new Date().getDay() <= 5;
393
      if (!isWeekday) {
394
        console.log('Resize prevented - not a weekday');
395
        return false;
396
      }
397
    },
398
    
399
    validateResize(handle, x, y, width, height) {
400
      // Prevent resize if area becomes too small
401
      const area = width * height;
402
      if (area < this.minArea) {
403
        console.log('Resize prevented - area too small:', area);
404
        return false;
405
      }
406
      
407
      // Log valid resize operations
408
      console.log(`Resize via ${handle}:`, { x, y, width, height });
409
    }
410
  }
411
}
412
</script>
413
```
414

415
**Advanced Callback Patterns:**
416

417
```vue
418
<template>
419
  <vue-draggable-resizable
420
    :on-drag="throttledDragCallback"
421
    :on-resize="debouncedResizeCallback"
422
  >
423
    Performance-optimized callbacks
424
  </vue-draggable-resizable>
425
</template>
426

427
<script>
428
import { throttle, debounce } from 'lodash';
429

430
export default {
431
  methods: {
432
    // Throttled drag callback for performance
433
    throttledDragCallback: throttle(function(x, y) {
434
      // Update external systems at most every 100ms
435
      this.updateServerPosition(x, y);
436
    }, 100),
437
    
438
    // Debounced resize callback to batch updates
439
    debouncedResizeCallback: debounce(function(handle, x, y, width, height) {
440
      // Save to database only after resize stops for 300ms
441
      this.saveElementDimensions({ x, y, width, height });
442
    }, 300)
443
  }
444
}
445
</script>
446
```