Method _onStartMoving

src/gridstack.ts:2822–2877

@internal handles actual drag/resize start

(el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number)

  /** @internal handles actual drag/resize start */
  protected _onStartMoving(el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void {
    this.engine.cleanNodes()
      .beginUpdate(node);
    // @ts-ignore
    this._writePosAttr(this.placeholder, node)
    this.el.appendChild(this.placeholder);
    this.placeholder.gridstackNode = node;
    // console.log('_onStartMoving placeholder') // TEST

    // if the element is inside a grid, it has already been scaled
    // we can use that as a scale reference
    if (node.grid?.el) {
      this.dragTransform = Utils.getValuesFromTransformedElement(el);
    }
    // if the element is being dragged from outside (not from any grid)
    // we use the grid as the transformation reference, since the helper is not subject to transformation
    else if (this.placeholder && this.placeholder.closest('.grid-stack')) {
      const gridEl = this.placeholder.closest('.grid-stack') as HTMLElement;
      this.dragTransform = Utils.getValuesFromTransformedElement(gridEl);
    }
    // Fallback
    else {
      this.dragTransform = {
        xScale: 1,
        xOffset: 0,
        yScale: 1,
        yOffset: 0,
      }
    }

    node.el = this.placeholder;
    node._lastUiPosition = ui.position;
    node._prevYPix = ui.position.top;
    node._moving = (event.type === 'dragstart'); // 'dropover' are not initially moving so they can go exactly where they enter (will push stuff out of the way)
    node._resizing = (event.type === 'resizestart');
    delete node._lastTried;

    if (event.type === 'dropover' && node._temporaryRemoved) {
      // console.log('engine.addNode x=' + node.x); // TEST
      this.engine.addNode(node); // will add, fix collisions, update attr and clear _temporaryRemoved
      node._moving = true; // AFTER, mark as moving object (wanted fix location before)
    }

    // set the min/max resize info taking into account the column count and position (so we don't resize outside the grid)
    this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop as number, this.opts.marginRight as number, this.opts.marginBottom as number, this.opts.marginLeft as number);
    if (event.type === 'resizestart') {
      const colLeft = this.getColumn() - node.x;
      const rowLeft = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - node.y;
      dd.resizable(el, 'option', 'minWidth', cellWidth * Math.min(node.minW || 1, colLeft))
        .resizable(el, 'option', 'minHeight', cellHeight * Math.min(node.minH || 1, rowLeft))
        .resizable(el, 'option', 'maxWidth', cellWidth * Math.min(node.maxW || Number.MAX_SAFE_INTEGER, colLeft))
        .resizable(el, 'option', 'maxWidthMoveLeft', cellWidth * Math.min(node.maxW || Number.MAX_SAFE_INTEGER, node.x+node.w))
        .resizable(el, 'option', 'maxHeight', cellHeight * Math.min(node.maxH || Number.MAX_SAFE_INTEGER, rowLeft))
        .resizable(el, 'option', 'maxHeightMoveUp', cellHeight * Math.min(node.maxH || Number.MAX_SAFE_INTEGER, node.y+node.h));
    }
  }

  /** @internal handles actual drag/resize */