@elemental/ui / TypeAlias

LmnDraggableConfig

Generic types:DRAGGABLE_DATA DROP_AREA_DATA

A config item that can be passed to the draggable element via dependency injection. Is used for massive configuration of multiple draggable elements.

Presentation

type LmnDraggableConfig = {
  /**
   * Data passed through all the drag and drop events.
   *
   * If the single draggable has its own data, this will be merged or overridden.
   */
  data?: DRAGGABLE_DATA;
  /**
   * Disable the drag action for all the draggable injecting this config.
   *
   * Is it not possible to override if set by the children.
   */
  disabled: boolean;
  /**
   * Class applied to the preview element in addition to the default one lmn-draggable-preview and the ones set in draggable.
   */
  previewClass?: string;
  /**
   * Class applied to the placeholder element in addition to the default one lmn-draggable-placeholder and the ones set in draggable.
   */
  placeholderClass?: string;
  /**
   * 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 single draggable has its own restrictTo, this will be overridden.
   */
  restrictTo?:
    | string
    | string[]
    | LmnDropAreaDirective<DRAGGABLE_DATA, DROP_AREA_DATA>
    | Array<LmnDropAreaDirective<DRAGGABLE_DATA, DROP_AREA_DATA>>;
  /**
   * Callback called every time a drag operation is started on this draggable, also if the trigger is another draggable in the group.
   * @param event
   */
  onDragStart?: (
    event: LmnDragStartEvent<DRAGGABLE_DATA, DROP_AREA_DATA>,
  ) => void;
  /**
   * Callback called every time the cursor enter is a drop area.
   *
   * If the drop area is disabled, no event is fired.
   * @param event
   */
  onDragEnter?: (
    event: LmnDragEnterEvent<DRAGGABLE_DATA, DROP_AREA_DATA>,
  ) => void;
  /**
   * Callback called every few hundred millisecond if the cursor is in a drop area.
   *
   * If the drop area is disabled, no event is fired.
   * @param event
   */
  onDragOver?: (
    event: LmnDragOverEvent<DRAGGABLE_DATA, DROP_AREA_DATA>,
  ) => void;
  /**
   * Callback called every time the cursor leave a drop area.
   *
   * If the drop area is disabled, no event is fired.
   * @param event
   */
  onDragLeave?: (
    event: LmnDragLeaveEvent<DRAGGABLE_DATA, DROP_AREA_DATA>,
  ) => void;
  /**
   * Callback called when the drag and drop operation has completed, successfully or not.
   * @param event
   */
  onDrop?: (event: LmnDropEvent<DRAGGABLE_DATA, DROP_AREA_DATA>) => void;
  /**
   * Callback called 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.
   * @param event
   */
  onDragEnd?: (event: LmnDragEndEvent<DRAGGABLE_DATA, DROP_AREA_DATA>) => void;
};