I have a div with overflow = auto, so when there is more content than the size of the div, scrollbars appear. My draggables and droppables are all elements inside of that div. Everything works fine when the scrollbar is scrolled all the way to the top, but when you scroll it down any amount, the draggables fail.

1. In the Draggable#updateDrag function (~ line 356), on the first line, I changed the value of the pointer argument to take into account how much the container had scrolled:
   
   pointer = new Array(pointer[0] + this.options.scroll.scrollLeft, pointer[1] + this.options.scroll.scrollTop);
   
   At least one of the solutions I recall seeing mentioned this.
   
   
2. In the same function, I changed the first two elements in the p array before the last two elements get pushed onto it:
   
   p = new Array(p[0] + this.options.scroll.scrollLeft, p[1] + this.options.scroll.scrollTop);
   
   This also just takes into account how far the container has been scrolled.
   
   
3. To ensure my droppables were able to receive the draggables given the adjusted coordinates, we need to adjust the scroll position just as we did above. First, I adjusted the code in my webpage that produces the droppables and added a scroll parameter that should be the name of the element that scrolls (the same parameter the draggable accepts):
   
   Droppables.add('slot_1_7_2', { scroll: 'weeklycalendar' });
   
   Since Droppable elements don't generally take a scroll option, we'll need to modify that code in Scriptaculous's dragdrop.js file as well. In the Droppable#fire function (~ line 109) add the folling lines under Position.prepare();:
   
   var point = [Event.pointerX(event), Event.pointerY(event)];
if(this.last_active.scroll){
  point[0] += $(this.last_active.scroll).scrollLeft;
  point[1] += $(this.last_active.scroll).scrollTop;
}

   Finally, just underneath that where it calls this.isAffected, change the first parameter from [Event.pointerX(event), Event.pointerY(event)] to use the variable we created above, pointer.