Basic Draggable Component

A flexible and customizable draggable component for creating floating, movable UI elements.

Overview

The Basic Draggable component provides:

• Fixed positioning with drag functionality
• Customizable initial position (X and Y coordinates)
• Placement options (top, bottom, left, right)
• Optional cursor-following mode
• Boundary constraints to keep elements within viewport
• Event callbacks for drag lifecycle

When to Use

Use the Basic Draggable component when you need to:

• Create floating action buttons or widgets
• Build draggable chat windows or modals
• Implement movable toolbars or panels
• Create interactive floating elements
• Build custom draggable interfaces

Key Features

• Drag & Drop: Click and drag to move the component around the screen
• Position Control: Set initial X and Y positions in pixels
• Placement Options: Choose how the component aligns relative to its position (top, bottom, left, right)
• Cursor Following: Optional mode to make the component follow the cursor
• Boundary Constraints: Automatically prevents dragging outside the viewport
• Event System: Emits events for drag start, dragging, and drag stop
• Slot-Based Content: Use slots to add any content to the draggable element

API Reference →

View Code →