Draggable

The Draggable component is a fixed-position element that can be dragged within the browser window.

Here is an example of the Draggable component in action:

Draggable

<draggable>
    <p>Content</p>
</draggable>

Essential details for using and customizing the Draggable component:

Customize appearance and behavior with CSS variables:
- --edge-offset: Defines the edge offset for the draggable element.
- --transition: Specifies the transition effect when the element reenters the window after being dragged outside.
The Draggable element is fixed by default. Ensure any custom draggable element is also positioned as fixed.
If a draggable element contains a .draggable-area class, this area will serve as the drag handle instead of the entire element.
Set the initial position of the draggable element using utility classes like .left, .right, .center, .top, .bottom, and .middle.
By default:
- Draggable elements without a .draggable-area are entirely draggable.
- When using a .draggable-area, it automatically applies user-select: none; and cursor: move; for improved usability.

The Draggable class offers the following configuration options:

selector (string): Default is draggable. Specifies the elements to be made draggable.
draggableAreaSelector (string): Default is .draggable-area. Identifies the area used for dragging.
edgeOffset (number): Default is 5. Determines the minimum distance the element should maintain from the window edge.
onDragStart (function): Callback triggered when dragging starts.
onDrag (function): Callback triggered while dragging.
onDragEnd (function): Callback triggered when dragging ends.