Drag & drop widget & insert it into a scroll box

Hello, I am fiddling with some drag & drop operations in widgets. Turned out easier than I thought. However, there’s one problem that persists.
Here’s what the widget looks like at the moment:
Insert.png
The two columns are scroll boxes.
As I drop a widget into the right scroll box it is in this case “copied” (a new widget is created) and added to the list, putting it at the bottom of the list. But I want it to be inserted wherever it is hovering. (I am setting the padding value of the hovered widget to add some blank space so that the widgets below adjust their position).
How would I go about doing that? The scroll box has no insert option like an array does.

As far as I know, there’s no elegant way to do it. You will need to rebuild the AppliedModification list every time you insert an item. :expressionless:

  • create an array with the modules (mirroring what you have in the right-hand-side scrollbox)
  • when you drag&drop, insert the new module into the array at the desired location (you can get the child index of the hovered item and insert the object at that index +1)
  • remove all children from scrollbox and add them again from the array

This is surprisingly performant as you do not need to create/destroy any widgets.

If you need to work with a list containing hundreds of widgets, consider rebuilding the list only from the point of insertion.

That is exactly what I am working on, instead of creating a widget and adding it as a child to the list directly; Add/Insert it into a array. Whenever the array is updated, add each widget element of the array to the list after first clearing the lists children.
I find it quite an elegant solution – compared to the mess I was trying before.

But thank you for the reply, now I know this method should work if I can just do it correctly.