Monthly Archives: May 2009

Clear jQuery Droppable List

The other day at work I finally¬†had the chance to get my hands on code (see here why I’m so anxious about it ūüėõ ).

We were using the jQuery’s Drag and Drop feature, where the droppable areas¬†(DIV’s) are marked as droppable and registered for the events like the following:

  126 function RegisterDroppable(DomID) {

¬†¬†128¬†¬†¬†¬† ¬†¬† $(‘#’ + DomID).droppable({

¬†¬†129¬†¬†¬†¬† ¬†¬†¬† ¬†¬†¬† activeClass: ‘Droppable-active’,

¬†¬†130¬†¬†¬†¬† ¬†¬†¬† ¬†¬†¬† tolerance: ‘pointer’,

¬†¬†131¬†¬†¬†¬† ¬†¬†¬† ¬†¬†¬† hoverClass: ‘Droppable-hover’,

  132             drop: function(ev, ui) {

  133                //some code for the drop event here

  134 

  135             }

  136         });

  137     }

¬†The issue was that those droppable DIV’s were created at client side, and they would change¬†upon a user interaction with the page (old DIV’s disappear and¬†new droppable DIV’s are created), all at¬†client side.
The problem¬†appeared¬†when we tried to drag a “draggable” area AFTER changing the DIV’s the first time, the following javascript error¬†showed:

¬†“Error: Unspecified error.”

After investigating, it appeared that the plugin preserves a list of the droppables objects, and when we drag the “draggable” object, a loop that traverses the droppable objects would be called. But¬† those DIV’s do not really exist any more, hence¬†the error shows up.

So the solution was to empty that list of lost references of the droppables so we can make a new clean droppables list, I did the following: 

¬†¬†¬†87¬†var drop = $.ui.ddmanager.droppables[‘default’];

   88 

   89         var count = drop.length;

   90         for (var i = count; i > 0; i- ) {

   91             drop[i-1].destroy();

   92         }

 

I couldn’t find better way to access the list, there was scarse information on the web for a solution, I hope this helps you just in case.