@studiometa/ui

Appearance

JS API ​

The Draggable component uses the withDrag decorator of the @studiometa/js-toolkit package and inherits from all of its APIs.

Options ​

x ​

  • Type: boolean
  • Default: true

Enable/disable moving the target ref on the x axis. Defaults to true, use the data-option-no-x attribute to disable it.

y ​

  • Type: boolean
  • Default: true

Enable/disable moving the target ref on the y axis. Defaults to true, use the data-option-no-y attribute to disable it.

fitBounds ​

  • Type: boolean
  • Default: false

Wether or not to force the target ref to always come back in the root element's bounds. Use the data-option-fit-bounds attribute to enable it.

strictFitBounds ​

  • Type: boolean
  • Default: false

Wether or not to force the target ref to strictly stay in the root element's bounds. Use the data-option-strict-fit-bounds attribute to enable it.

margin ​

  • Type: string
  • Default: '0'

Define margins for the bounds. It follows the notation from the margin CSS declaration, meaning that it is possible to define different margins for top, right, bottom and left bounds.

The values are unitless and in pixels.

html
<!-- Add a 10px inner margin -->
<div data-component="Draggable"
  data-option-margin="10">
</div>

<!-- Add a 10px inner inline margin -->
<div data-component="Draggable"
  data-option-margin="0 10">
</div>

<!-- Add a 10px inner inline margin and 10px bottom margin -->
<div data-component="Draggable"
  data-option-margin="0 10 10">
</div>

<!-- Add a 10px outer margin -->
<div data-component="Draggable"
  data-option-margin="-10 -10 -10 -10">
</div>

sensitivity ​

  • Type: number
  • Default: 0.5

A number between in the range 0–1 used to smoothen the transition between each position.

dropSensitivity ​

  • Type: number
  • Default: 0.1

A number between in the range 0–1 used to smoothen the transition between each position when the drag has ended and inertia is active.

Properties ​

props ​

  • Type: { x: number, y: number, originX: number, originY: number, dampedX: number, dampedY: number , progressX: number, progressY: number }

The values used to calculate and render the dragged element.

Getters ​

target ​

  • Return: HTMLElement
  • Default: this.$refs.target

The element that will move when the drag is happening.

parent ​

  • Return: HTMLElement
  • Default: this.$el

The element used to calculate the bound limits when the fitBounds option is enabled.

bounds ​

  • Return: { yMin: number, yMax: number, xMin: number, xMax: number }
  • Default: the minimum and maximum position for the target element to stay in the parent bounds

Methods ​

render() ​

  • Parameters: none
  • Returns: void

Update the target position.

Emits ​

drag-start ​

  • Parameters:

Emitted when the drag starts (pointer down).

drag-drag ​

  • Parameters:

Emitted while the drag is moving (pointer move).

drag-drop ​

  • Parameters:

Emitted when the drag stops (pointer up).

drag-inertia ​

  • Parameters:

Emitted when the drag target is moving with inertia.

drag-stop ​

  • Parameters:

Emitted when the drag target has settled its position when the fitBounds option is not enabled.

drag-fit ​

  • Parameters:

Emitted when the drag target has settled its position when the fitBounds option is enabled.

drag-render ​

  • Parameters:$

Emitted after the DOM has been updated.