Rearranging row of elements in a Viewport

Hi guys,

I have a viewport that works as a container for an undefined number of rows. Each rows is a class containing other components. Rows are stored as a vector.

I want to provide the users the chance to re-arrange the order of these rows by vertical dragging (something like the file tree view in projucer). What would be the best way to do that?

The Viewport would be the drag target.


the way tab reordering is done in the browser is nice. i guess it goes something like this:

  • assign a Y coordinate to each row. the number will be Y / rowHeight.

  • when you click get the row by mouseY/rowHeight (as integer), and store Y in emptyRowY

  • dragging updates Y of the row according to the offset as if it were floating above it

  • when rowHeight/2 + Y (the center of the row) exceeds the edge of a previous or next row, move the exceeded row to emptyRowY, and store the previous position of the moved row in emptyRowY

  • each time the selected row overtakes another row, it moves to emptyRowY, and the values are updated

  • releasing the mouse updates the Y position of the selected column from emptyRowY, so if you don’t reach over another tab, it will return to its original position.