Draggable HTML Elements

Add these data attributes to your widget’s HTML elements to make them draggable, with no extra JavaScript.

data-dragtarget="my_unique_id"

Marks the element to move (like a window or a data box). The element must have the style position: absolute;. You can add or remove this attribute at any time while the widget runs.

data-dragarea="my_unique_id"

Marks the area the user drags (like a top bar) to move the target element. Its value must match the id of a data-dragtarget attribute. It can sit on the target element itself or on a different one. You can add or remove this attribute at any time while the widget runs.

data-defaultx="40"

Default X position of the element, as a percentage of the screen width. The element must have the style position: absolute;.

data-defaulty="40"

Default Y position of the element, as a percentage of the screen height. The element must have the style position: absolute;.

data-defaultoffsetx="4"

X offset from the defaultx, in em units. Can be positive or negative. The element must have the style position: absolute;.

data-defaultoffsety="4"

Y offset from the defaulty, in em units. Can be positive or negative. The element must have the style position: absolute;.