ZDraggable

A powerful draggable component that allows users to drag elements within a container or across the page.

Preview

Drag me

Import

import { ZDraggable } from "zurto-ui";

Basic Usage

import { ZDraggable } from "zurto-ui";

function Example() {
  return (
    <ZDraggable>
      <div className="card">Drag me around!</div>
    </ZDraggable>
  );
}

Props

Prop	Type	Default	Description
children	ReactNode	-	The content to make draggable
disabled	boolean	false	Disable drag functionality
axis	'x' | 'y' | 'both'	'both'	Constrain movement to an axis
bounds	'parent' | HTMLElement	-	Constrain drag within bounds
handle	string	-	CSS selector for drag handle
onDragStart	(e, data) => void	-	Called when drag starts
onDrag	(e, data) => void	-	Called during drag
onDragEnd	(e, data) => void	-	Called when drag ends
className	string	-	Additional CSS classes

With Axis Constraint

50%

// Only allow horizontal movement
<ZDraggable axis="x">
  <div>Horizontal only</div>
</ZDraggable>

// Only allow vertical movement
<ZDraggable axis="y">
  <div>Vertical only</div>
</ZDraggable>

With Bounds

<div id="container" style={{ width: 400, height: 300 }}>
  <ZDraggable bounds="parent">
    <div>Constrained to parent</div>
  </ZDraggable>
</div>

With Handle

<ZDraggable handle=".drag-handle">
  <div className="card">
    <div className="drag-handle">⋮⋮</div>
    <p>Only the handle is draggable</p>
  </div>
</ZDraggable>

Accessibility

• ✅ Keyboard navigation support (arrow keys to move)
• ✅ ARIA attributes for screen readers
• ✅ Focus visible indicators
• ✅ Escape key to cancel drag