OpenLIME

Class: Draggable

Draggable

Draggable class that enables HTML elements to be moved within a parent container.

This class creates a draggable container with a handle and attaches the specified element to it. The element can then be dragged around its parent container using the handle, providing an interactive UI element for repositioning content.

Features:

  • Flexible positioning using top/bottom and left/right coordinates
  • Customizable handle size, color, and appearance
  • Maintains position relative to parent container edges on window resize
  • Touch-enabled with pointer events support for multi-device compatibility
  • Smooth drag animations with visual feedback during movement
  • Boundary constraints within the parent container

new Draggable(element, parent [, options])

Creates a new Draggable instance.

Parameters:
Name Type Argument Default Description
element HTMLElement

The element to be made draggable
parent HTMLElement | string

The parent element where the draggable container will be appended. Can be either an HTMLElement or a CSS selector string
options Object <optional>
 {}

Configuration options for the draggable element

Properties
Name Type Argument Default Description
top number | null <optional>
 null

The initial top position in pixels. Mutually exclusive with bottom
bottom number | null <optional>
 20

The initial bottom position in pixels. Mutually exclusive with top
left number | null <optional>
 null

The initial left position in pixels. Mutually exclusive with right
right number | null <optional>
 20

The initial right position in pixels. Mutually exclusive with left
handleSize number <optional>
 10

The size of the drag handle in pixels
handleGap number <optional>
 5

The gap between the handle and the draggable content in pixels
zindex number <optional>
 200

The z-index of the draggable container
handleColor string <optional>
 '#f0f0f0b3'

The background color of the handle (supports rgba)
dragOpacity number <optional>
 0.6

Opacity of the element while being dragged (between 0 and 1)
Source:
Example
// Create a draggable element at the bottom-right corner
const element = document.getElementById('my-element');
const parent = document.querySelector('.parent-container');
const draggable = new Draggable(element, parent, {
  bottom: 20,
  right: 20,
  handleColor: 'rgba(100, 150, 200, 0.7)'
});

Methods

appendChild(element)

Appends an HTML element to the draggable container and updates its position.

Parameters:
Name Type Description
element HTMLElement

The element to append to the draggable container
Source:
Returns:

This instance for method chaining

Type
Draggable

hide()

Hides the draggable element.

Source:
Returns:

This instance for method chaining

Type
Draggable

setHandleColor(color)

Changes the handle color.

Parameters:
Name Type Description
color string

New color for the handle (hex, rgb, rgba)
Source:
Returns:

This instance for method chaining

Type
Draggable

show()

Shows the draggable element if it's hidden.

Source:
Returns:

This instance for method chaining

Type
Draggable

updatePosition()

Updates the position of the draggable container based on its current options and parent dimensions. This method is called automatically on window resize and when elements are appended.

Source:
Returns:

This instance for method chaining

Type
Draggable