Drag & Drop Elements to the Trash with MooTools 1.2

Everyone loves dragging garbage files from their desktop into their trash can. There's a certain amount of irony in doing something on your computer that you also do in real life. It's also a quick way to get rid of things. That's why I've created a trash can class using MooTools 1.2.

The CSS

#trash			{ width:141px; height:246px; float:left; background:url(trash.jpg) 0 0 no-repeat; }
.trashable		{ background:#eee; padding:20px; font-size:24px; width:50px; height:50px; margin:10px; text-align:center; cursor:move; }

Nothing special. I set the trash can in the background of a DIV and set some default styles for the "trashables" class.

The XHTML

<div id="trash"></div>
<div class="trashable"></div>
<div class="trashable"></div>
<div class="trashable"></div>

Just a trash DIV and the trash items.

The MooTools 1.2 Class

/* class */
var trashCan = new Class({
	
	//implements
	Implements: [Options,Events],
	
	//options
	options: {
		trashCan: $('trash'),
		trashables: $$('.trashable')
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//prevent def
		document.ondragstart = function() { return false; };
		//drag/drop
		$$('.trashable').each(function(drag) {
			new Drag.Move(drag, {
				droppables: this.options.trashCan,
				onDrop: function(el,droppable) {
					if(droppable) {
						alert('Disposing of ' + el.get('rel') + '!');
						drag.dispose();
					}
				},
				onEnter: function(el,droppable) {
					
				},
				onLeave: function(el,droppable) {
					
				}
			});
		}.bind(this));
	}
});
	
/* usage */
var trash = new trashCan({
	trashCan: $('trash'),
	trashables: $$('.trashable')
});

The class is extremely simple to use! All you need to do is provide "trashCan" and "trashables" items.

What Would I Use This For?

Lots of things. Managing the server's file collection from within a browser, for example, would be a great usage. You could also create a bunch of tasks that you delete when you have them completed.

hare your thoughts and ideas for this class!