Question

I was wondering how I could prevent an object from being visible when dragged outside a div. Here is a jsfiddle with my problem: http://jsfiddle.net/thomaslefeuvre/zAWMX/.

I want to achive this sort of effect when the object is dragged to the edge of the div:
https://i.stack.imgur.com/W7f4H.png

I know how this effect can be achived using an iframe, but due to my javascript needs I don’t think it would be practical to use this method. I should also note that I don’t want scroll bars to be placed on the container div.

Is there a way this can be achieved with CSS such as by using z-index?

I have tried playing around with this but haven’t got very far.

Answer 1

Since the object is moving beyond the container’s area, you will want to add overflow: hidden to #container. This hides any content that goes beyond a parent element’s limits. I’ve updated your example: http://jsfiddle.net/zAWMX/1/