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.