@elemental/ui / TypeAlias

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;
};