0
# Drag Configuration
1

2
Configuration options for controlling dragging behavior including axis constraints, boundary limits, grid snapping, and interaction controls.
3

4
## Capabilities
5

6
### Drag Control
7

8
Enable or disable dragging functionality and constrain drag direction.
9

10
```typescript { .api }
11
/**
12
 * Completely disable dragging functionality
13
 * When true, component cannot be moved by user interaction
14
 */
15
disableDragging?: boolean;
16

17
/**
18
 * Constrain dragging to specific axis
19
 * - 'x': Only horizontal movement
20
 * - 'y': Only vertical movement  
21
 * - 'both': Movement in both directions (default)
22
 * - 'none': No movement allowed (similar to disableDragging)
23
 */
24
dragAxis?: "x" | "y" | "both" | "none";
25
```
26

27
**Usage Examples:**
28

29
```typescript
30
// Disable dragging entirely
31
<Rnd
32
  default={{ x: 100, y: 100, width: 200, height: 150 }}
33
  disableDragging={true}
34
>
35
  Only resizable, not draggable
36
</Rnd>
37

38
// Horizontal-only dragging
39
<Rnd
40
  default={{ x: 0, y: 100, width: 200, height: 150 }}
41
  dragAxis="x"
42
>
43
  Slides horizontally only
44
</Rnd>
45

46
// Vertical-only dragging
47
<Rnd
48
  default={{ x: 100, y: 0, width: 200, height: 150 }}
49
  dragAxis="y"
50
>
51
  Slides vertically only
52
</Rnd>
53
```
54

55
### Drag Handle
56

57
Specify which part of the component should act as the drag handle.
58

59
```typescript { .api }
60
/**
61
 * CSS class name selector for drag handle
62
 * Only elements with this class will initiate drag operations
63
 * If not specified, entire component is draggable
64
 */
65
dragHandleClassName?: string;
66
```
67

68
**Usage Examples:**
69

70
```typescript
71
// Title bar as drag handle
72
<Rnd
73
  default={{ x: 0, y: 0, width: 300, height: 200 }}
74
  dragHandleClassName="drag-handle"
75
>
76
  <div>
77
    <div className="drag-handle" style={{ background: '#ccc', padding: '10px' }}>
78
      Drag me to move the window
79
    </div>
80
    <div style={{ padding: '10px' }}>
81
      Content area - clicking here won't drag
82
    </div>
83
  </div>
84
</Rnd>
85

86
// Icon as drag handle
87
<Rnd
88
  default={{ x: 0, y: 0, width: 250, height: 150 }}
89
  dragHandleClassName="drag-icon"
90
>
91
  <div>
92
    <span className="drag-icon">⋮⋮</span>
93
    <span>Content with drag icon</span>
94
  </div>
95
</Rnd>
96
```
97

98
### Drag Grid Snapping
99

100
Snap dragging movement to a grid for aligned positioning.
101

102
```typescript { .api }
103
/**
104
 * Snap dragging to grid increments
105
 * Array of [x_increment, y_increment] in pixels
106
 * Default: [1, 1] (no visible snapping)
107
 */
108
dragGrid?: Grid; // [number, number]
109
```
110

111
**Usage Examples:**
112

113
```typescript
114
// Snap to 20px grid
115
<Rnd
116
  default={{ x: 0, y: 0, width: 200, height: 150 }}
117
  dragGrid={[20, 20]}
118
>
119
  Snaps to 20px grid when dragging
120
</Rnd>
121

122
// Different horizontal and vertical snapping
123
<Rnd
124
  default={{ x: 0, y: 0, width: 200, height: 150 }}
125
  dragGrid={[50, 25]}
126
>
127
  50px horizontal, 25px vertical grid
128
</Rnd>
129
```
130

131
### Boundary Constraints
132

133
Constrain dragging within specific boundaries.
134

135
```typescript { .api }
136
/**
137
 * Movement boundaries for dragging
138
 * - 'parent': Constrain within offsetParent element
139
 * - 'window': Constrain within browser window
140
 * - 'body': Constrain within document body
141
 * - CSS selector string: Constrain within selected element
142
 * - Element: Constrain within specific DOM element
143
 */
144
bounds?: string | Element;
145
```
146

147
**Usage Examples:**
148

149
```typescript
150
// Constrain within parent element
151
<div style={{ width: 500, height: 400, border: '1px solid #ccc', position: 'relative' }}>
152
  <Rnd
153
    default={{ x: 0, y: 0, width: 200, height: 150 }}
154
    bounds="parent"
155
  >
156
    Stays within parent container
157
  </Rnd>
158
</div>
159

160
// Constrain within browser window
161
<Rnd
162
  default={{ x: 100, y: 100, width: 200, height: 150 }}
163
  bounds="window"
164
>
165
  Cannot be dragged outside viewport
166
</Rnd>
167

168
// Constrain within specific element
169
<div>
170
  <div id="drag-area" style={{ width: 600, height: 400, border: '2px solid blue' }}>
171
    Drag boundary area
172
  </div>
173
  <Rnd
174
    default={{ x: 0, y: 0, width: 200, height: 150 }}
175
    bounds="#drag-area"
176
  >
177
    Limited to blue boundary area
178
  </Rnd>
179
</div>
180
```
181

182
### Drag Interaction Controls
183

184
Control how drag interactions are initiated and handled.
185

186
```typescript { .api }
187
/**
188
 * CSS selector for elements that should prevent drag initiation
189
 * Useful for interactive elements within draggable content
190
 */
191
cancel?: string;
192

193
/**
194
 * Allow dragging with any mouse button (not just left-click)
195
 * Default: false (only left mouse button initiates drag)
196
 */
197
allowAnyClick?: boolean;
198

199
/**
200
 * Position offset for drag positioning calculations
201
 * Advanced prop for custom drag positioning behavior
202
 * Imported from react-draggable's DraggableProps
203
 */
204
dragPositionOffset?: import("react-draggable").DraggableProps["positionOffset"];
205
```
206

207
**Usage Examples:**
208

209
```typescript
210
// Prevent drag from interactive elements
211
<Rnd
212
  default={{ x: 0, y: 0, width: 300, height: 200 }}
213
  cancel=".no-drag"
214
>
215
  <div>
216
    <div>Draggable area</div>
217
    <button className="no-drag">Button won't start drag</button>
218
    <input className="no-drag" placeholder="Input won't start drag" />
219
  </div>
220
</Rnd>
221

222
// Allow right-click dragging
223
<Rnd
224
  default={{ x: 0, y: 0, width: 200, height: 150 }}
225
  allowAnyClick={true}
226
>
227
  Can be dragged with any mouse button
228
</Rnd>
229

230
// Complex cancel selector
231
<Rnd
232
  default={{ x: 0, y: 0, width: 350, height: 250 }}
233
  cancel="button, input, select, textarea, .interactive"
234
>
235
  <div>
236
    <div>Draggable header</div>
237
    <button>Won't drag</button>
238
    <div className="interactive">Won't drag</div>
239
    <div>This area will drag</div>
240
  </div>
241
</Rnd>
242
```
243

244
## Advanced Configuration
245

246
### User Select Hack
247

248
Control text selection behavior during drag operations.
249

250
```typescript { .api }
251
/**
252
 * Add 'user-select: none' to document body during drag
253
 * Prevents text selection artifacts during drag operations
254
 * Default: undefined (hack is enabled)
255
 * Set to false if it causes issues with your app
256
 */
257
enableUserSelectHack?: boolean;
258
```
259

260
### Scale Support
261

262
Handle dragging in scaled/transformed contexts.
263

264
```typescript { .api }
265
/**
266
 * Scale factor for drag calculations
267
 * Use when component is inside scaled/transformed containers
268
 * Default: 1 (no scaling)
269
 */
270
scale?: number;
271
```
272

273
**Usage Examples:**
274

275
```typescript
276
// Dragging in scaled container
277
<div style={{ transform: 'scale(0.8)' }}>
278
  <Rnd
279
    default={{ x: 0, y: 0, width: 200, height: 150 }}
280
    scale={0.8}
281
  >
282
    Correct drag behavior in scaled container
283
  </Rnd>
284
</div>
285
```