LmnDragAreaRef
Generic types: | DRAGGABLE_DATA DROP_AREA_DATA |
A reference to a drag area.
Presentation
type LmnDragAreaRef = {
/**
* The id of the drag area.
*/
id: Signal <string>;
/** Native element of the drag area. */
element: HTMLElement;
/**
* Data passed through all the drag and drop events.
*
* If the draggable children has its own data, this will be overridden.
*/
data: Signal <DRAGGABLE_DATA | undefined>;
/**
* Disable the drag action for all the draggable inside this area.
*
* Is it not possible to override if set by the children.
*/
disabled: Signal <boolean>;
/**
* Class applied to the preview element in addition to the default one lmn-draggable-preview and the ones set in draggable children.
*/
previewClass: Signal <string | undefined>;
/**
* Class applied to the placeholder element in addition to the default one lmn-draggable-placeholder and the ones set in draggable children.
*/
placeholderClass: Signal <string | 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.
*/
restrictTo: Signal <
| undefined
| string
| string[]
| LmnDropAreaDirective <DRAGGABLE_DATA, DROP_AREA_DATA>
| Array<LmnDropAreaDirective <DRAGGABLE_DATA, DROP_AREA_DATA>>
>;
/** Emit an event every time a drag operation is started on this draggable, also if the trigger is another draggable in the group . */
onDragStart: (
event: LmnDragStartEvent <DRAGGABLE_DATA, DROP_AREA_DATA>,
) => void;
/**
* Emit an event every time the cursor enter is a drop area.
*
* If the drop area is disabled, no event is fired.
*/
onDragEnd: (event: LmnDragEndEvent <DRAGGABLE_DATA, DROP_AREA_DATA>) => void;
/**
* 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.
*/
onDragOver: (event: LmnDragOverEvent <DRAGGABLE_DATA, DROP_AREA_DATA>) => void;
/**
* Emit an event every time the cursor leave a drop area.
*
* If the drop area is disabled, no event is fired.
*/
onDragEnter: (
event: LmnDragEnterEvent <DRAGGABLE_DATA, DROP_AREA_DATA>,
) => void;
/**
* 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.
*/
onDragLeave: (
event: LmnDragLeaveEvent <DRAGGABLE_DATA, DROP_AREA_DATA>,
) => void;
/**
* Emit an event when the drag and drop operation has completed, successfully or not.
*/
onDrop: (event: LmnDropEvent <DRAGGABLE_DATA, DROP_AREA_DATA>) => void;
};