Hello,

at first I will describe my problem, so that everybody can understand it better and/or maybe someone can provide a much better solution for my main problem.

Problem:

I have a list of plain elements (items) within a sidebar panel, which I want to drag into a grid (gridstack).

"gridstack" is working with jQuery UI internally. To be able to drag an item onto the grid from the outside, the item it must have a special elements structure and must be a draggable().

My sidebar items have a very different elements structure, than the expected gridstack-structure. But they could be draggables(). 

Flowchart idea so far:

1. Start drag on the sidebar item.

2. Replace the current dragged element with a newly created element, which has the expected gridstack structure.

3. Just complete the drag-and-drop process with the newly created element, so that it will be inserted into the grid.

My only problem is point 2.

Is it possible to switch out the current dragged element within a running drag event?

Many thanks in advance!