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.
Thanks, Emad! We had a similar issue,a little bit changed: we are creating dynamically droppable areas and the manager does not recognize them until the first trip to the server.Thanks a lot!