simple way to use addTabWithDragAndDrop

[axeldvera]

Hi guys. I am trying to make a button that allows it to be dragged into the layout and created or inserted into a tab/tabset.

I have seen the example in the demo but it is too complex for me to understand. Could you help me with this?

The button I have is outside the layout, that is, it is not part of the layout as a border button.

Thank you very much in advance. Greetings!

[nealus]

The relevant lines in the demo are:

<Layout ref={this.layoutRef}
        model={this.state.model}
        factory={this.factory}>

<button onMouseDown={this.onAddDragMouseDown}
    onTouchStart={this.onAddDragMouseDown}>Add Drag</button>

onAddDragMouseDown = (event: React.MouseEvent | React.TouchEvent<HTMLButtonElement>) => {
    event.stopPropagation();
    event.preventDefault();
    
    (this.layoutRef!.current!).addTabWithDragAndDrop(undefined, 
    {
        component: "grid",
        name: "Grid "
    });
}