title: Handling Scroll bars with jQuery event Drag and Drop
body: <p>I have a room div with some toy divs arranged on it, see <a href="https://i.stack.imgur.com/kdq6C.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kdq6C.jpg" alt="alt text"></a>
  </p>
  
  <p>Toys are absolutly positioned and are drag-able with in the walls of the room . The room container div has a fixed height and height, so the room has horizontal as well as vertical scrolls. I use <a href="http://threedubmedia.com/code/event/drag" rel="nofollow noreferrer">jquery event drag</a> plug-in for setting up DnD. I managed to set up the toys drag only with in the lomits of the wall, but when there are scrolls, component is moving a little ouside the wall (only up to the actual width of the wall). </p>
  
  <p>I want to show only a portion of the toy as shown below <a href="https://i.stack.imgur.com/kKjzc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kKjzc.png" alt="alt text"></a>
  </p>
  
  <p>I tried setting the <code>z-index</code>, but has no effect, any one has better idea? </p>