title: jQuery UI Draggable Clone in Scrollable DIV
body: <p>I've been working on a project that requires me to use jQuery UI drag and drop functionality. When introducing a scrollable div into the mix, my code is not working as intended, any help would be greatly appreciated.</p>
  
  <p>The Goals:</p>
  
  <ul>
  <li><p>(Complete) Allow users to drag multiple instances of a smiley or sad face from the ToolBar onto one of the three canvases in the scrollable div. This was done by cloning the helper and removing the orignal droppableShape class.</p></li>
  <li><p>(Complete) When a face from the toolbar has been dropped, set the containment of that face to the canvas it was dropped on.</p></li>
  <li><p>(Complete) When a face from the toolbar has been dropped, continue to allow the user to move it freely around the canvas it is contained in.</p></li>
  <li><p>(Complete) Add the three canvases to a scrollable div for more usability. <em>This is where my problem is introduced</em></p></li>
  </ul>
  
  <p>The Problem:</p>
  
  <ul>
  <li>When I add face tool to my scrollable div, the object scrolls with the div and doesn't not "stick" to the desired canvas that the user dropped it on.</li>
  </ul>
  
  <p>What I have tried and did not help:</p>
  
  <pre><code>// Make shapes droppable
  $(".droppableShape").draggable({
       helper:'clone',
       scrollable: false,
       appendTo: '#canvases_area'
  });
  </code></pre>
  
  <p>Here is a fiddle that shows when a face is dropped onto the div, it is static while the canvases scroll. Please let me know if I can provide any further information and thank you for looking at this!</p>
  
  <p><a href="http://jsfiddle.net/fvec4y83/" rel="nofollow">http://jsfiddle.net/fvec4y83/</a></p>