Clear jQuery Droppable List

Emad Alashi — Tue, 19 May 2009 18:25:19 +0000

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.

Emad Alashi's Blog » list

Clear jQuery Droppable List