Class CbnDataviewDragManager<T>

Type Parameters

  • T

Constructors

constructor

Properties

_dragData _dragState _targetDataview _targetElement onDrag onDragEnd onDragStart options

Methods

_initDragListeners createDragImage defaultOnDrag defaultOnDragEnd defaultOnDragStart getDragData setDragData setDragState update

Constructors

constructor

  • new CbnDataviewDragManager<T>(dataview, targetElementSelector, options?): CbnDataviewDragManager<T>

  • Creates a new DataviewDragManager instance which handles the events of dragging a dataview item. Provide the dataview control, the target element selector (where the items are supposed to be dragged into) and optionally provide the class of the disabled dataview items. You can also provide whether or not you want the manager to handle touch events and the class of the dataview item images.

    Provide a type to define how your drag data will look like. The drag data can be used to "transfer" data from an event to another one. The given type will be applied to the item property of DragData

    Type Parameters

    • T

    Parameters

    Returns CbnDataviewDragManager<T>

Properties

Private _dragData

_dragData: undefined | DragData<T>

Private _dragState

_dragState: DragState

Private _targetDataview

_targetDataview: undefined | Dataview

Private _targetElement

_targetElement: Element

onDrag

onDrag: ((manager, e) => Promise<void>)

Event that fires while an item is being dragged. You SHOULD overwrite this event to handle placement of the dragged element inside the target element.

Positioning the drag image while dragging and checking if the dragged element is hovered over the target is done by the package.

Type declaration

    • (manager, e): Promise<void>

    • Parameters

      • manager: this
      • e: MouseEvent | TouchEvent

      Returns Promise<void>

onDragEnd

onDragEnd: ((manager, e) => Promise<void>)

Event that fires after dragging the item ended.

You can overwrite this with your own implementation.

Deleting the drag image is done by the package.

Type declaration

    • (manager, e): Promise<void>

    • Parameters

      • manager: this
      • e: MouseEvent | TouchEvent

      Returns Promise<void>

onDragStart

onDragStart: ((manager, e, item) => Promise<void>)

Event that fires before the dataview item gets dragged. You SHOULD overwrite this event to handle your own data. In the overwrite, you should use setDragData to give the package all the information it needs about the drag image.

Drag image creation is handeled by the package.

Type declaration

    • (manager, e, item): Promise<void>

    • Parameters

      • manager: this
      • e: MouseEvent | TouchEvent
      • item: HTMLElement

      Returns Promise<void>

options

options: Partial<CbnDataviewDragManagerOptions>

Methods

Private _initDragListeners

  • _initDragListeners(): void

  • Initialize all the default drag events and call the custom overwrite methods.

    Returns void

createDragImage

  • createDragImage(targetElement, viewerZoom, width, height, src): {
        dragImageContainer: HTMLDivElement;
        imageHeight: number;
        imageWidth: number;
    }

  • Create the Drag Image with its correct dimensions also respecting the current viewers zoom value.

    Parameters

    • targetElement: Element

      The element where the dragged item should be droppable and added to.

    • viewerZoom: number

      The current zoom lvl of the viewer.

    • width: number

      The width of the image that should be created.

    • height: number

      The height of the image that should be created.

    • src: string

      The url/src of the image that should be created.

    Returns {
        dragImageContainer: HTMLDivElement;
        imageHeight: number;
        imageWidth: number;
    }

    • dragImageContainer: HTMLDivElement
    • imageHeight: number
    • imageWidth: number

Private defaultOnDrag

Private defaultOnDragEnd

Private defaultOnDragStart

  • defaultOnDragStart(e, item): Promise<void>

  • Default DragStart.

    Parameters

    • e: MouseEvent | TouchEvent
    • item: HTMLElement

    Returns Promise<void>

getDragData

setDragData

setDragState

update

  • update(): void

  • Triggers the update for the dataview drag listeners. Use this whenever the data entries of the dataview get updated to ensure every drag listener is correctly registered to handle the drag.

    Returns void

    void

Settings

Member Visibility

Theme

On This Page

constructor_dragData_dragState_targetDataview_targetElementonDragonDragEndonDragStartoptions_initDragListenerscreateDragImagedefaultOnDragdefaultOnDragEnddefaultOnDragStartgetDragDatasetDragDatasetDragStateupdate