Method _setupAcceptWidget

src/gridstack.ts:2407–2680

@internal called to add drag over to support widgets being added externally

()

  /** @internal called to add drag over to support widgets being added externally */
  protected _setupAcceptWidget(): GridStack {

    // check if we need to disable things
    if (this.opts.staticGrid || (!this.opts.acceptWidgets && !this.opts.removable)) {
      dd.droppable(this.el, 'destroy');
      return this;
    }

    // vars shared across all methods
    let cellHeight: number, cellWidth: number;

    const onDrag = (event: DragEvent, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
      helper = helper || el;
      const node = helper.gridstackNode;
      if (!node) return;

      // if the element is being dragged from outside, scale it down to match the grid's scale
      // and slightly adjust its position relative to the mouse
      if (!node.grid?.el) {
        // this scales the helper down
        helper.style.transform = `scale(${1 / this.dragTransform.xScale},${1 / this.dragTransform.yScale})`;
        // this makes it so that the helper is well positioned relative to the mouse after scaling
        const helperRect = helper.getBoundingClientRect();
        helper.style.left = helperRect.x + (this.dragTransform.xScale - 1) * (event.clientX - helperRect.x) / this.dragTransform.xScale + 'px';
        helper.style.top = helperRect.y + (this.dragTransform.yScale - 1) * (event.clientY - helperRect.y) / this.dragTransform.yScale + 'px';
        helper.style.transformOrigin = `0px 0px`
      }

      let { top, left } = helper.getBoundingClientRect();
      const rect = this.el.getBoundingClientRect();
      left -= rect.left;
      top -= rect.top;
      const ui: DDUIData = {
        position: {
          top: top * this.dragTransform.xScale,
          left: left * this.dragTransform.yScale
        }
      };

      if (node._temporaryRemoved) {
        node.x = Math.max(0, Math.round(left / cellWidth));
        node.y = Math.max(0, Math.round(top / cellHeight));
        delete node.autoPosition;
        this.engine.nodeBoundFix(node);

        // don't accept *initial* location if doesn't fit #1419 (locked drop region, or can't grow), but maybe try if it will go somewhere
        if (!this.engine.willItFit(node)) {
          node.autoPosition = true; // ignore x,y and try for any slot...
          if (!this.engine.willItFit(node)) {
            dd.off(el, 'drag'); // stop calling us
            return; // full grid or can't grow
          }
          if (node._willFitPos) {
            // use the auto position instead #1687
            Utils.copyPos(node, node._willFitPos);
            delete node._willFitPos;
          }
        }