Haciendo Drag & Drop con Mochikit

Hacer drag & drop con mochikit, es relativamente facil.

Hace unos dias hice un ejemplo bastante sencillo. y con pocas lineas de javascript podia hacer que se arastratan unos divs o lo que sean hacia otro div.

El planteamiento para hacer esto es, hay que crear uno o mas elementos Draggable, y por otra parte crear elementos Droppable aqui definimos todos los elementos que puede permitir tener esta seccion[esta discriminacion la hace por la clase CSS asignada].

Y despues simplemente lo conectamos, nuestras funciones para que cree los elementos al cargar la pagina, en mochikit esto se hace con addLoadEvent.


Aqui dejo el codigo, el codigo casi habla por si solo.

addLoadEvent(function (){
createDrag();
createDrop();
});

function createDrag(){
var arreglo = getElementsByTagAndClassName(null,"draggable");
for (var i = 0;i < arreglo.length;i++){
    new Draggable(arreglo[i],{revert:true,
                handle: false,
                starteffect: MochiKit.Visual.Opacity,
                endeffect: MochiKit.Visual.Opacity,
                zindex: 1000,
                setclass: null,
                ghosting: null,
                onchange: MochiKit.Base.noop,
                scroll: false,
                scrollSensitivity: 20,
                scrollSpeed: 15 });
}
}

function createDrop(){
var arreglo = getElementsByTagAndClassName(null,"droppable");
for (var i = 0;i < arreglo.length;i++){
    new Droppable(arreglo[i], {
                    accept: ['draggable'],
                    ondrop: function (element,dropElement,ev) {
                        appendChildNodes(dropElement,element);
                        log("llamando a servicios");
                        }
                    });
}
}

mochikit nos simplifica mucho la vida, el hacer esto a solo javascript, me imagino que no debe ser tan trivial, y con mochikit pareciera que si lo fuera.

Nota: getElementsByTagAndClassName y $ son de mochikit, una busca un tag especifico que tenga X clase Css, y el otro es el renombramiento de getElementById como esta aqui.
--
Atte.
Victor Hugo Saavedra
http://vhspiceros.blogspot.com