Ayuda con planteamineto de funcion o funciones con mootools

[ira]

Buenas, lo primero pedir disculpas por el turron que voy a soltar.

Hace poco me baje el mootools y la verdad que va muy bien. Despues de estar cacharrando con el he llegado a un punto en el que me he quedado pillao y creo que es debido al planteamiento inicial y es por lo que me he decidido a postear pidiendo ayuda...

El objetivo es crear un sistema de puntuacion de fotos (24 imagenes extraidas de una BD por php), el usuario selecionaria de un listado de 10 imagenes las que mas le gustan y las arrastraria a otra columna segun el orden de seleccion.

La manera que lo he hecho es creando 10 destinos por un bucle y segun al que sea arrastrada deberia pillar un valor para luego insertarlo en la base de datos, los problemas que me he encontrado son que:
1. No consigo que una imagen ya seleccionada no pueda volver a ser seleccionada, puedo hacer que desaparezca del listado pero ese no es mi objetivo.
2. Posibilidad de rehacer el orden en el destino, o eliminar alguna seleccion equivocada de ese destino, al ser eliminada deberia volverse activa en el listado de seleccion.
3. Que a un destino solo se le pueda añadir una imagen.
4. Que los destinos reconozcan las imagenes que contienen.
Son demasiadas cosas sin las que el sistema no podra ser util...
Por eso creo que el planteamiento inicial no es bueno.

En mi opinion lo que deberia hacer es que cada imagen tuviese un valor. que cada destino tuviese el valor 0 para vacio y 1 para lleno, asi solucionaria en teoria todos los problemas que tengo. Pero la verdad es que de javescript ando un poco pillado.

Esta es la funcion que he hecho partiendo de la base del drag.cart de mootools

Código:

window.addEvent('domready', function(){

    $$('.imgbox').addEvent('mousedown', function(event){
        event.stop();

        var foto = this;
		
        var clone = foto.clone().setStyles(foto.getCoordinates()).setStyles({
            opacity: 0.7,
            position: 'absolute'
        }).inject(document.body);

        var drag = new Drag.Move(clone, {

            droppables: $$('.destino'),
            
            onDrop: function(dragging, destino){

                dragging.destroy();

                if (drop != null){
                    foto.clone().inject(destino);
                    destino.highlight('#7389AE', '#FFF');
			foto.setStyles({
            		opacity: 0.7,
                         })
                }
            },
            onEnter: function(dragging, destino){
                destino.tween('background-color', '#98B5C1');
            },
            onLeave: function(dragging, destino){
                destino.highlight('#98B5C1', '#00FF00');
            },
            onCancel: function(dragging){
                dragging.destroy();
            }
        });
        drag.start(event);
    });

});

Como podria hacer para nombrar cada destino y dar un valor a cada imagen?
Una vez hecho esto, como podria hacer para comprobar si el destino esta lleno o vacio?

No se igual es que me he liado demasiado y como he comentado al inicio el plateamiento esta mal desde el principio.

Bueno, muchas gracias por vuestro tiempo.

[masterpuppet]

Lo que estas planteando no es algo trivial, deberías hacer de lo bueno de Moo las clases, pero si estas flojo con js te va a ser difícil y mas si queres utilizar correctamente Moo, si tenes algún ejemplo que puedas colgar de lo que estas haciendo talvez te puedo dar una mano.

Saludos.

[ira]

Gracias por contestar.

La verdad que ando muy flojo con js y con el moo mas todavia.
Llevo desde el viernes leyendo tutoriales del moo o buscando alguien que ya haya hecho algo parecido pero nada. No encuentro nada y ya empiezo a desesperar.
Aparte de probar con la clase drag he probado con la sortables y vaya, con ninguna consigo hacer lo que quiero. Por eso creo que he planteado mal la apilcacion desde el principio. Menos mal que es una cosa mia para aprender.
Agradezco muchisimo tu oferta, pero estoy trabajando en local y no tengo un hueco, ademas que mi intencio con todo esto es aprender.
Igual lo he liado todo y resulta que todo tiene una solucion mas facil que como la he planteado.

La verdad es que, tu como harias para poder mover unas fotos desde la columna A hasta la columna B, sin que desapareciesen la fotos de la columna A pero que no las puedas volver a seleccionar mientras esten en la columna B??? teniendo en cuenta que al final quiero hacer inserts en un BD con las votaciones... por lo que deberia respetar el orden... Me decidi por hacer muchos destinos para poder colocar las fotos en dos columnas escalonadas, pero igual seria mejor poner solo un destino que no admitiese mas de 10 fotos y que estas segun el orden se coloquen por css???

Muchas gracias de nuevo. pongo una imagen chapucera por si me he vuelto a liar.



Ps he usado como referencia el ejemplo del carrito en mootools porque se parece mas a lo que quiero que el de sortables...
Acabo de descubrir la clase .removeEvents(); y con ella consigo que una vez seleccionada una foto no se pueda volver a seleccionar...