I am exploring a 'drag and drop' script that meets my requirements, but I am facing a couple of issues with the positioning of the DIV and allowing a DIV to be fixed while still expanding its parent container.
You can view an example on CodePen.
Essentially, I have a list on the left side of the page that can grow or shrink, and the div expands and contracts accordingly.
On the right side of the page, there is a dropzone where users can drag items from the list and drop them.
If the list is longer than the page, I want the right pane (outlined in YELLOW) to scroll down the page as the user scrolls down. It should scroll back up and return to its original position when the user scrolls up.
As items are dragged from the left to the right, the YELLOW pane expands. However, it currently expands over the DRAG DIV instead of causing the DRAG DIV to expand so that the YELLOW pane stays within it.
I would appreciate any advice on how to make this work. Thank you :)