How to Drag An Image Over an IFrame

A small gif image is at the top of my page. I gave the image a simple drag class so it can be dragged around. In the middle of the page I have a small IFrame.

When I drag the picture through the IFrame area, the picture is dragged underneath the IFrame and then comes out on the other side.

Changing the z-order did not help. How can code my javascript drag so the image will drag on top of the iframe?

Thanks in advance for your help.