grid item leaving grid instead of scrolling down

[nassissme]

Subject of the issue

I am trying to use gridstack to add elements that come from a sidebar.

The elements I drag and drop are just images that are then transformed into the right component. I use the "added" event to replace it with the right component.

This works fine, but as soon as I set the acceptWidgets option, the items already in the grid go out of the grid when I try to place them at the bottom of the grid.

Your environment

"gridstack": "4.4.0",
"vue": "2.6.11",

Steps to reproduce

Here is a minimalist example of my configuration (without component
) : https://jsfiddle.net/nassissme/uvfyeL7r/135/

Actual behavior

The element leaves the grid when it has no place to go (no other grid)

Expected behavior

When I move an item from my grid, I want it to stay in the grid.

When I move an item from the sidebar, it can only go into the grid.

Code

I've looked at the code a little bit, and the possible problem area is located here:

  GridStackDD.get()
    .droppable(this.el, {
      accept: (el: GridItemHTMLElement) => {
        let node: GridStackNode = el.gridstackNode;
        // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
        if (node?.grid === this) return true; // always return here
        if (!this.opts.acceptWidgets) return false;
        // check for accept method or class matching
        let canAccept = true;
        if (typeof this.opts.acceptWidgets === 'function') {
          canAccept = this.opts.acceptWidgets(el);
        } else {
          let selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets as string);
          canAccept = el.matches(selector);
        }
        // finally check to make sure we actually have space left #1571
        if (canAccept && node && this.opts.maxRow) {
          let n = {w: node.w, h: node.h, minW: node.minW, minH: node.minH}; // only width/height matters and autoPosition
          canAccept = this.engine.willItFit(n);
        }
        return canAccept;
      }
    })

we systematically pass here:

if (node?.grid === this) return true

Several proposals to solve my problem:

1. Remove if (node?.grid === this) return true ?

But I have not yet understood the side effects that this can have

2. Add a new option 'singleGrid=true' and update the condition

3. Others ?

What do you think ?

[adumesny]

this has nothing to do with adding an external element in - though it makes it easier to see - you can see the issue if you drag the one you have fast enough to leave the grid. during the 4.x collision re-write I changed how we detect wanting to leave the grid (moving way past the last item) vs trying to put just below the last one but apparently missed that case... tricky code.

Though I would think removable:false (default) would prevent you from dragging the element outside in the first place.

the check above is to allow dragging inside, while dragging from the outside in...

thanks for posting a simple example, but at this point I only have time to work with donations.