Fixed position "droppables" for jQuery

I’m currently using interface elements for jquery, a collection of rich interface components that utilize the lightweight JavaScript library jQuery, to add drag & drop functionality to a project at work.

One of the project constraints was that the “droppables” i.e. the target drop zones for draggable elements, had to be created with a fixed position (i.e. position:fixed).

This, unfortunately, isn’t (yet) supported by the interface library and so I had to add a bit of code to the iutil.js script which makes up part of the core “interface” library.

So, without much ado and for anyone else who may require the functionality, here’s the updated/hacked portion of code in question (delimited by START and END):

  
getPositionLite : function(el) {
   var x = 0, y = 0;
   while(el) {
       // START 
       if(el.style.position == “fixed”) {
         if (document.documentElement) {
           y += document.documentElement.scrollTop;
           x += document.documentElement.scrollLeft;
         } else if (document.body) {
           y += document.body.scrollTop;
           x += document.body.scrollLeft;
         };

         x += parseInt(el.style.left, 10) || 0;
         y += parseInt(el.style.top, 10) || 0;

         break;
      };
      // END 

      x += el.offsetLeft || 0;
      y += el.offsetTop || 0;
      el = el.offsetParent;
    };                
    return {x:x, y:y};
},
  
  

et voila… you are now free to position:fixed your droppable areas.

Just to be clear, the update/hack applies to version 1.2 of the interface library – I have no idea if this will work for other versions.