OpenLIME

Class: Draggable

Draggable

The Draggable class enables an element to be dragged and moved around within its parent element. It creates a draggable container with a handle that can be used to initiate the dragging action. The draggable element is positioned absolutely within its parent container and can be customized through various options.

The class requires either a top or bottom position and either a left or right position to be specified through the options parameter. These determine the initial position of the draggable element within its parent container. The default positioning is bottom=20 and right=20.

Features:

  • Flexible positioning using top/bottom and left/right coordinates
  • Customizable handle size and appearance
  • Automatic position updates on window resize
  • Touch-enabled dragging support
  • Configurable spacing between handle and content

new Draggable(element, parent [, options])

Creates a new Draggable instance.

Parameters:
Name Type Argument 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 <optional>

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

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

The initial left position in pixels. Mutually exclusive with right
right number <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)
Source:

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: