Method _writePosAttr

src/gridstack.ts:1920–1937

@internal write position CSS vars and x,y,w,h attributes (not used for CSS but by users) back to element

(el: HTMLElement, n: GridStackNode)

  /** @internal write position CSS vars and x,y,w,h attributes (not used for CSS but by users) back to element */
  protected _writePosAttr(el: HTMLElement, n: GridStackNode): GridStack {
    // Avoid overwriting the inline style of the element during drag/resize, but always update the placeholder
    if ((!n._moving && !n._resizing) || this._placeholder === el) {
      const xProp = this.opts.rtl ? 'right' : 'left';
      // width/height:1 x/y:0 is set by default in the main CSS, so no need to set inlined vars
      el.style.top = n.y ? (n.y === 1 ? `var(--gs-cell-height)` : `calc(${n.y} * var(--gs-cell-height))`) : null;
      el.style[xProp] = n.x ? (n.x === 1 ? `var(--gs-column-width)` : `calc(${n.x} * var(--gs-column-width))`) : null;
      el.style.width = n.w > 1 ? `calc(${n.w} * var(--gs-column-width))` : null;
      el.style.height = n.h > 1 ? `calc(${n.h} * var(--gs-cell-height))` : null;
    }
    // NOTE: those are technically not needed anymore (v12+) as we have CSS vars for everything, but some users depends on them to render item size using CSS
    // ALways write x,y otherwise it could be autoPositioned incorrectly #3181
    el.setAttribute('gs-x', String(n.x));
    el.setAttribute('gs-y', String(n.y));
    n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w');
    n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h');
    return this;
  }

  /** @internal call to write any default attributes back to element */
  protected _writeAttr(el: HTMLElement, node: GridStackNode): GridStack {