Bind (drop) listener to gridster-item. Allow dropping on existing item.

[austenstone]

I can't bind drop events to a gridster-item and I haven't been able to find any GridsterConfig settings to allow this.

<gridster>
    <gridster-item (drop)="sayHello()"></gridster-item>
</gridster>

Notice not draggable like the empty grid.

How can I override the default behavior that prevents dropping on a gridster-item? I want to do this for specific items.

I actually prefer to do this

<gridster>
    <gridster-item>
        <div (drop)="sayHello()">
            <p>CONTENT</p>
        </div>
    </gridster-item>
</gridster>

[austenstone]

It's simple.

options: GridsterConfig = {
    enableOccupiedCellDrop: true
}

[austenstone]

I would appreciate a

emptyOccupiedDropCallback?: (event: MouseEvent, item: GridsterItem) => void;

similar to emptyCellDropCallback and to pair with enableOccupiedCellDrop

[austenstone]

If we can get the handle to GridsterItem from checkCollision it would be nice to check if item has some new property droppable inside the function getValidItemFromEvent.

I haven't looked how you convert GridsterItem to GridsterItemComponentInterface and not sure how good of a design this would be.

Kind of like this.... angular-gridster2\src\lib\gridsterEmptyCell.service.ts

  getValidItemFromEvent(e: MouseEvent, oldItem?: GridsterItem | null): GridsterItem | undefined {
    ....
    ....
    if (!this.gridster.$options.enableOccupiedCellDrop) {
      let c = this.gridster.checkCollision(item);
      if (!c || c.droppable) {
        return item;
      }
      return;
    }
    return item;
  }

[gitalvininfo]

Hi @astone2014 did you successfully implemented this callback? I have the same use case as yours.

Thanks.