Drag and drop items from split view: Items hide behind main content

I’m trying to implement drag and drop where I drag items from a s split view’s left to the main/center pane.
When I drag items from the left they hidden behind the main content area (ion-side-menu-content) I tried playing around with the z-index and position properties in css but was not successful.
Any help will be greatly appreciated.
Here is a codepen that demonstrates my problem:


FYI I’m using the GreenSock library for the drag n drop but the problem is not specific to that library. I see the same problem if I use the built in HammerJs touch events.

Thanks!