@studiometa/ui

Appearance

Examples ​

Simple ​

Fit bounds ​

Use the data-option-fit-bounds attribute to keep the draggable target in the component's root element bounds.

By disabling drag on the y axis with the data-option-no-y attribute and with the data-option-fit-bounds option enabled, we can begin implementing a draggable carousel.

Dynamic parent ​

By default, the parent getter returns the component's root element. The getter can be overriden to get a dynamic parent that will be resolved when dropping the element defined by the target getter.

In the following example, the Action component is used to toggle the ring class on each colored square when they are clicked. The Draggable component is extended to override the parent getter to find the first element in the DOM with the ring class and use it as a basis to calculate the bounds.