Jquery - drag and drop mask that doesn't hide page's events

I am building a small website. In my website users can perform different operations, everything is written in plain html. Nothing complex there.

Now, here comes the trick. I'd like to give my users the ability to drag and drop images and place them in a mask on top pf the page they are viewing.

This doesn't work well since the mask blocks all operations users used to be able to do. My old html controls no longer receive focus when the user click them, as my upper mask catches all click events. Is there any way to get around this? Maybe somehow tell the script e开发者_StackOverflow社区ngine to set the z-index of the original page as the topmost, yet not hiding the mask?

I assume you're putting a full width/height div with a higher Z-index than the original page. You then add images to that div element through drag drop?

Implementing a hover info box has what you could use as Neil has already shown.

Another option would be to find all controls at the Specific X, Y click - even those hidden by divs. Given an x,y coordinate, I need to find all html elements underneath it