Drag & Drop Elements to the Trash with MooTools 1.2

By  on  

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!

Recent Features

  • By
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    MooTools Documentation Search Favelet

    I'm going to share something with you that will blow your mind: I don't have the MooTools documentation memorized. I just don't. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use...

  • By
    Scrolling &#8220;Go To Top&#8221; Link Using Dojo

    One of the most popular code snippets of posted on my blog has been the scrolling "Go To Top" link snippet. The premise of the snippet is simple: once the user scrolls an element (usually the BODY element) past a given threshold, a "Go...

Discussion

  1. Ah, nice one David! (And the example cracked me up!) Thanks for sharing, man.

  2. Why you initialize the dragging on start for all elements. If you have 50 or 100 items there is big overhead cause the most of them don’t will be dragged. It would be better to add only one mousedown event on the container that holds of all .trashable elements. When the user starts clicking create a new Drag object with event.target as dragable element (if target.hasClass('trashable')).
    Great example anyway.

  3. cssProdigy

    Great Work.

  4. Mark

    Hi there David,
    Do you know any way to make the draggable revert to its original position like in a ‘sortable’ list?
    Cheers.

  5. So sorry, I forget to wrap in tag

  6. Hello David:

    Me again, this is what I have ’till now: http://jsfiddle.net/escoffie/dAAxY/1/

    What’s happening:
    1) The sort behavior is not working
    2) The el.dispose() is weird lefting behind its children elements
    3) The confirm does always the same if I click OK or Cancel

    What should happen:
    1) The sort behavior should work when dragging the red text
    2) The entire LI element and its children should have been removed when dragged to the trash can
    3) When asked, Ok should proceed to dispose of the element, and cancel , should revert the element to the UL set.

    Thank you in advance, and please delete my previous posts.

  7. Hello David:

    Me again, this is what I have ’till now: http://jsfiddle.net/escoffie/dAAxY/1/

    What’s happening:
    1) The sort behavior is not working
    2) The el.dispose() is weird lefting behind its children elements
    3) The confirm does always the same if I click OK or Cancel

    What should happen:
    1) The sort behavior should work when dragging the red text
    2) The entire LI element and its children should have been removed when dragged to the trash can
    3) When asked, Ok should proceed to dispose of the element, and cancel , should revert the element to the UL set.

    Thank you in advance, and please delete my previous posts.

  8. For anyone interested, I finally figured out how to make sortables + trashables elements.

    Here is a JSFiddle with the solution: http://jsfiddle.net/escoffie/nD6bL/

    It uses Element.collide from Jean-Nicolas Boulay

    Any improvements are welcome!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!