element_to_drag & css, cannot drag element outside of div if overflow CSS set to auto

Question

I have a list of items to be dragged and dropped to a list of slots on a page. This is working fine using drop_receiving_element and draggable_element.

There is no limit to the number of possible draggable items, so I set "overflow: auto" on the div that holds them to add a scroll-bar. Now the item cannot be dragged outside of the div.

I searched on this site and this issue has been discussed for jquery, but I cannot find anything for rails. If there is a way to handle this in rails I would appreciate the help. My code is as follows:

<div id="entries_list">    
    <% @entries.each do |entry| -%>
        <% element_to_drag_id = "entry_#{entry.id}" %>
        <div class="entry" id=<%= element_to_drag_id %> style="cursor:move">
                Title: <%= entry.title %><br />
                Blurb: <%= entry.blurb[0,40] %>
        </div>
        <%= draggable_element(element_to_drag_id, :revert => true) %>
    <% end %>
</div>

 <div id="page_slots_list">
  <% @slots.each do |slot| %>
   <% element_to_drop_id = "slot_#{slot.id}" %>
   <% if (slot.slot_number > 1)%>

    <div id=<%= element_to_drop_id %> class="slot" >
     <%= slot.slot_number %>
     <%= slot.entry_id %><br />
   </div>
    <%= drop_receiving_element "slot_#{slot.id}",
    :accept  => "entry", 
    :hoverclass => 'hover',
    :with   => "'entry=' + (element.id.split('_').last())",
    :url  => {:controller => 'dashboard/pages', :action => :set_entry, :slot_id => slot.id, :page_id => @page.id}, 
    :complete => (render(:update) {|page| page.reload})
     %>
   <% end %>
  <% end %>
 </div>

CSS

#entries_list {
 padding: 10px;
 width: 400px;
 height: 500px;
 background: gray;
 float: left;
 margin: 2px;
 overflow: auto;
 border:thin #CCC solid;
}

The code above translates to the following in the browser

<script type="text/javascript">
//<![CDATA[
Droppables.add("slot_1", {accept:'entry', hoverclass:'hover', onDrop:function(element){new Ajax.Request('/dashboard/pages/set_entry?page_id=3&slot_id=1', {asynchronous:true, evalScripts:true, onComplete:function(request){try {
window.location.reload();
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('window.location.reload();'); throw e }}, parameters:'entry=' + (element.id.split('_').last()) + '&authenticity_token=' + encodeURIComponent('htPrPkCfquhJKVblDL2bvgRKXHFuizMVz9TTVXwe9B4=')})}})
//]]>
</script>