Class DDDraggable

src/dd-draggable.ts:34–515

// let count = 0; // TEST

export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDragOpt> {
  public helper: HTMLElement; // used by GridStackDDNative

  /** @internal */
  protected mouseDownEvent: MouseEvent;
  /** @internal */
  protected dragOffset: DragOffset;
  /** @internal */
  protected dragElementOriginStyle: Array<string>;
  /** @internal */
  protected dragEls: HTMLElement[];
  /** @internal true while we are dragging an item around */
  public dragging: boolean;
  /** @internal last drag event */
  public lastDrag: DragEvent;
  /** @internal */
  protected parentOriginStylePosition: string;
  /** @internal */
  protected helperContainment: HTMLElement;
  /** @internal properties we change during dragging, and restore back */
  protected static originStyleProp = ['width', 'height', 'transform', 'transform-origin', 'transition', 'pointerEvents', 'position', 'left', 'right', 'top', 'minWidth', 'willChange'];
  /** @internal pause before we call the actual drag hit collision code */
  protected dragTimeout: number;
  /** @internal */
  protected dragTransform: DragTransform = {
    xScale: 1,
    yScale: 1,
    xOffset: 0,
    yOffset: 0
  };
  /** @internal auto-scroll animation variables */
  protected _autoScrollAnimId?: number;
  protected _autoScrollContainer?: HTMLElement;
  protected _autoScrollMaxSpeed?: number;

  constructor(public el: GridItemHTMLElement, public option: DDDragOpt = {}) {
    super();

    // get the element that is actually supposed to be dragged by
    const handleName = option?.handle?.substring(1);
    const n = el.gridstackNode;
    this.dragEls = !handleName || el.classList.contains(handleName) ? [el] : (n?.subGrid ? [el.querySelector(option.handle) || el] : this.getAllHandles());
    if (this.dragEls.length === 0) {
      this.dragEls = [el];
    }
    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
    this._mouseDown = this._mouseDown.bind(this);
    this._mouseMove = this._mouseMove.bind(this);
    this._mouseUp = this._mouseUp.bind(this);
    this._keyEvent = this._keyEvent.bind(this);
    this.enable();
  }

  /** return all handles omitting other nested `.grid-stack-item` children (in case node.subGrid isn't set for some reason) */
  protected getAllHandles(): HTMLElement[] {
    return Array.from(this.el.querySelectorAll(this.option.handle)).filter((node): node is HTMLElement => {
      if (!(node instanceof HTMLElement)) return false;
      const owner = node.closest('.grid-stack-item');