Arrastre y suelte elementos a la papelera con MooTools 1.2 -

A todo el mundo le encanta arrastrar archivos basura desde su escritorio a la papelera. Hay cierta ironía en hacer algo en tu computadora que también haces en la vida real. También es una forma rápida de deshacerse de cosas. Es por eso que creé una clase de papelera usando MooTools 1.2.

El CSS

#basura{ ancho:141px; altura: 246 px; flotador izquierdo; fondo:url(basura.jpg) 0 0 sin repetición; }.trashable{ fondo:#eee; relleno: 20px; tamaño de fuente: 24px; ancho: 50 píxeles; altura: 50 píxeles; margen: 10px; alineacion de texto:centro; cursor: motor; }

Nada especial. Configure la papelera en el fondo de un DIV y establezca algunos estilos predeterminados para la clase “trashables”.

El XHTML

div/divdiv/divdiv/divdiv/div

Solo un DIV basura y los elementos basura.

La clase MooTools 1.2

/* clase */var trashCan = new Class({//implementsImplements: [Options,Events],//optionsoptions: {trashCan: $('trash'),trashables: $$('.trashable')},// inicializacióninicializar: función(opciones) {//establecer opcionesthis.setOptions(opciones);//prevenir defdocument.ondragstart = función() { return false; };//arrastrar/soltar$$('.trashable').each(función (arrastrar) {new Drag.Move(arrastrar, {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));}}); /* uso */var basura = new trashCan({trashCan: $('basura'),trashables: $$('.trashable')});

¡La clase es extremadamente sencilla de usar! Todo lo que necesita hacer es proporcionar elementos de “papelera” y “papelera”.

¿Para qué usaría esto?

Muchas cosas. Administrar la colección de archivos del servidor desde un navegador, por ejemplo, sería una gran utilidad. También puedes crear un montón de tareas que eliminarás cuando las hayas completado.

¡Comparte tus pensamientos e ideas para esta clase!