TypeScript Component
Draggable
Make any HTML element draggable with full mouse and touch support. Perfect for creating interactive interfaces, drag-and-drop features, and movable widgets.
Interactive Demo
Try dragging the boxes around the container. Works with both mouse and touch!
Drag Me!
Me Too!
And Me!
Drag events will appear here...
Features
🖱️ Mouse Support
Full mouse drag support with mousedown, mousemove, and mouseup events.
📱 Touch Support
Native touch event handling for mobile devices and tablets.
📦 Boundary Constraints
Elements are constrained within their parent container bounds.
🎯 Event Callbacks
Hook into drag events with onDragStart, onDrag, and onDragEnd callbacks.
Usage
Basic Usage
import { Draggable } from 'move.gl';
// Make an element draggable
const draggable = new Draggable('myElement');
// Clean up when done
draggable.destroy();
HTML Structure
<!-- Parent container defines boundaries -->
<div class="container">
<div id="myElement" class="draggable">
Drag me!
</div>
</div>
API Reference
Constructor
new Draggable(elementId: string)
Methods
| Method | Description |
|---|---|
destroy() |
Removes all event listeners and cleans up the instance |