Drag and Drop to ‘fixed’ position droppable

Edit: Modified to work with IE 7.

In Rails 2.1 (Prototype we found an error when we created a fixed position Droppable region on a page that could scroll. In order to get around the problem we modified the prototype.js library’s cumulativeOffset at line 1988 to be:

cumulativeOffset: function(element) {
   var valueT = 0, valueL = 0;
   do {
     if(Element.getStyle(element, 'position') == 'fixed')
              valueT += Position.deltaY + element.offsetTop;
              valueL += Position.deltaX + element.offsetLeft;
              element = null;
          } else {
         valueT += element.offsetTop || 0;
         valueL += element.offsetLeft || 0;
         element = element.offsetParent;
   } while (element);
   return [valueL, valueT];

This seems to have fixed the problem for when the user scrolls, though we haven’t had a chance yet to exhaustively test this in the other browsers. The closest thing we could find was at http://dev.rubyonrails.org/ticket/6411#comment:2 but ultimately didn’t work as written for us.

I would love for someone more familiar with Prototype to explain the ramifications of this change.

6 thoughts on “Drag and Drop to ‘fixed’ position droppable

  1. I modified the example to work with IE 7. We encountered the same problem after cross-browser testing. The major difference is the call to Position.prepare()

  2. The fix that was posted didn't really work for me. What we ended up doing was making the area containing the list of items we want to allow dragging into a overflow: auto and limiting the height type of div so that the droppable area can remain static and be accessible at all times.

Step up to the mic.

Your email address will not be published.