Exercise : Garbage Collector (by Morgan Doocy)

Write the necessary JavaScript / Scriptaculous code to complete the skeleton HTML and JS, which removes each icon with an Effect.Puff when it is dragged and dropped onto the trash can as in this working solution.

You will first need to inject 20 IE6 icons (imgs of class .browser, with a src of ie6.png) into the #browsers div. Use the provided positionRandomly function to give each img that you inject a random location.

Exercise : Garbage Collector (by Morgan Doocy)

Refer to the Scriptaculous documentation for Draggables, Droppables, and Core Effects to figure out how to configure your objects so that:

• All IE6 icons are draggable.
• The trash icon is a Droppable that will "accept" only elements of class .browser.
• Dragging and dropping a .browser icon to any part of the page except the trash can results in the icon returning to its original position.
• Hovering any .browser element over the trash icon will cause its class to change to .full.
• IE6 icons will disappear in an Effect.Puff when they are dropped onto the trash icon.
• After the Puff effect has finished, the puffed icon should remove itself from the page.

Exercise Garbage Collector

document.observe('dom:loaded', function() {
   createBrowsers();
   Droppables.add('trashcan', {
      accept: 'browser',
      hoverclass: 'full',
      onDrop: removeBrowser
   });
});
function createBrowsers() {
   for (var i = 0; i < 10; i++) {
      var img = $(document.createElement('img'));
      img.addClassName('browser');
      img.src = 'http://webster.cs.washington.edu/cse190m/sections/9/trashcan/ie6.png';
      positionRandomly(img);
      new Draggable(img, {
         revert: 'failure'
      });
      $('browsers').appendChild(img);
   }
}

Exercise Garbage Collector

function removeBrowser(elem) {
   new Effect.Puff(elem, {
      duration: .5,
      afterFinish: function() {
         elem.remove();
      }
   });
}