Subject of the issue

I have a Widget "drawer" that isn't loaded when the Grid is initialized, but is loaded afterwards.

Because it's loaded after the initial event, the elements don't get the dragStart event attached that they need to be droppable on the grid.

So, when I call GridStack.init({dragIn: '.widget-template'}) the Grid is there, but the widgets aren't.

Then when I open the "drawer" I need to re-initialize the dragIn on those elements.

Created from Slack Discussion:
https://gridstackjs.slack.com/archives/C0LPPLXJR/p1614264670015600

Your environment

• gridstack 3.3.0 using html5
• vue 2 (Although this same issue exists in plain HTML)

Steps to reproduce

Code:

GridStack.init({dragIn: '.widget-template'})

After Grid initialization, add <div class="widget-template">Drag Me</div> to the DOM

Expected behavior

The "Drag Me" element should be draggable

Actual behavior

It is not draggable or droppable.

Hacky Solution

I found a reference to grid._setupDragIn(); and run it when I open the drawer to re-connect those items, but it feels incredibly hacky, and I was wondering if there was a specific way to initialize the setupDragIn on dynamically added elements.

Proposed Solution

(From Alain)

I can make the method public and able to call multiple times (will skip items already done).

Best,
Keith