Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
@elemental/ui / Class

LmnDragAreaDirective

Decorators:@Directive
Generic types:DRAGGABLE_DATA DROP_AREA_DATA
Selectors:[lmnDragArea]

Defines a drag area to set default and bulk properties to all the draggable children.

Properties

NameTypeDescription
data
r
InputSignal<DRAGGABLE_DATA | undefined>

Data passed through all the drag and drop events.

If the draggable children has its own data, this will be merged or overridden.

disabled
r
InputSignalWithTransform<boolean, unknown>

Disable the drag action for all the draggable inside this area.

Is it not possible to override if set by the children.

dragDrop
r
OutputEmitterRef<LmnDropEvent<DRAGGABLE_DATA, DROP_AREA_DATA>>

Emit an event only when the drop operation has been performed.

If the drop area is disabled, or the drop operation is not allowed on the specific drop area, no event is fired.

dragEnd
r
OutputEmitterRef<Prettify<Omit<LmnDropAreaEvent<DRAGGABLE_DATA, DROP_AREA_DATA>, "previewWrapper"> & { success: boolean; }>>

Emit an event when the drag and drop operation has completed, successfully or not.

dragEnter
r
OutputEmitterRef<Prettify<LmnDragDropEvent<DRAGGABLE_DATA, DROP_AREA_DATA> & { dropArea: LmnDropAreaRef<DRAGGABLE_DATA, DROP_AREA_DATA>; previewWrapper: HTMLElement; } & { disableDrop: () => void; }>>

Emit an event every time the cursor enter is a drop area.

If the drop area is disabled, no event is fired.

dragLeave
r
OutputEmitterRef<Prettify<LmnDropAreaEvent<DRAGGABLE_DATA, DROP_AREA_DATA>>>

Emit an event every time the cursor leave a drop area.

If the drop area is disabled, no event is fired.

dragOver
r
OutputEmitterRef<Prettify<LmnDropAreaEvent<DRAGGABLE_DATA, DROP_AREA_DATA>>>

Emit an event every few hundred millisecond if the cursor is in a drop area.

If the drop area is disabled, no event is fired.

dragStart
r
OutputEmitterRef<Prettify<LmnDragDropEvent<DRAGGABLE_DATA, DROP_AREA_DATA> & { setAllowedEffect: (effect: "link" | "none" | "all" | "copy" | "copyLink" | "copyMove" | "linkMove" | "move" | "uninitialized") => void; previewWrapper: HTMLElement; }>>

Emit an event every time a drag operation is started on this draggable, also if the trigger is another draggable in the group.

elementRef
r
ElementRef<any>

Native element of the drag area.

id
r
InputSignal<string>

The id of the drag area.

placeholderClass
r
InputSignal<string | undefined>

Class applied to the placeholder element in addition to the default one lmn-draggable-placeholder and the ones set in draggable children.

previewClass
r
InputSignal<string | undefined>

Class applied to the preview element in addition to the default one lmn-draggable-preview and the ones set in draggable children.

reference
LmnDragAreaRef<DRAGGABLE_DATA, DROP_AREA_DATA>

Reference to the drag area.

restrictTo
r
InputSignal<string | string[] | LmnDropAreaDirective<DRAGGABLE_DATA, DROP_AREA_DATA> | LmnDropAreaDirective<DRAGGABLE_DATA, DROP_AREA_DATA>[] | undefined>

Used to restrict the drop area which could accept the element drop action. Could be an id/list of id or a drop area instance/list of drop area instances.

If the draggable children has its own restrictTo, this will be overridden.