Issue with draggable stacked images

Design help Custom code
1

Hey everyone!

This is my website > https://preview.webflow.com/preview/jrgn-net?utm_medium=preview_link&utm_source=designer&utm_content=jrgn-net&preview=fbe5b686ea251a9803cc133ff028f9f4&mode=preview

I have multiple draggable elements on my page (using code from the following: https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js)

Problem is, when I load my page only the top elements are draggable, even though the elements below have the correct tags.

i.e. The image with the yellow helmet and ‘fig. 8’ as it’s title, and the three business cards are the elements currently able to be dragged, everything underneath them seem to be blocked somehow.

I’ve just found this Draggabilly as another option I have yet to explore.

I’m very new to web development, this is my website so I appologise in advance if some obvious stuff has slipped past me.

Regardless, thanks in advance!!

2

If you can’t utilise the draggable elements on the webflow read-only link - please go to jrgn.net to see the live version

3

I have actually solved this problem.

I found the issue was the sections / containers the images were housed in (which weren’t necessarily in the exact same location as the image - sometimes spanning the entire view width) were blocking interactions with elements underneath them. I set the Max Width & Max Height of these sections and containers to 1px each.

I think this is more to do with my sloppy first timer set up than anything else.