problema con [object HTMLDivElement]

[ira]

Hola que tal,

Tengo un probemilla que seguro que es una tonteria pero como ando flojillo en js me esta siendo imposible... Estoy usando mootools

Estoy haciendo una cadena en la que debo ir añadiendo los elementos que voy pinchando.
Mi problema es que cuando le pido que me lea el contenido de un div me lo devuelve como un objeto y no me da el valor. me sale [object HTMLDivElement] en vez del contenido del div que deberia ser un numero.

Os dejo el codigo por si podeis echarle un vistazo... ahora lo estoy haciendo con div visibles para ver si funciona o no, mas tarde lo hare con un input hidden...

Los div.

<div id="elemento" >0</div>
<div id="elemento2">|</div>

El script.

var contar = $('elemento');
var orden = $('elemento2');
var fotoId = this.get('name');
contar.set('html',fotoId);
orden.set('html',orden + '|' + fotoId)

He dado un par de palos de ciego y si pongo:
orden.set('html',orden.value + '|' + fotoId) me devuelve undefine

contar funciona ya que cada vez que pincho en una imagen me muestra su id en el div elemento.

Pero orden falla, me muestra [object HTMLDivElement] '|' el id de la foto....

Muchas gracias por vuestro tiempo, igual es que soy tan paleto en esto del JS que resulta que esto no se puede hacer, pero he mirado un monton de ejemplos y lo hacian de una forma parecida, solo he adaptado sus scripts para mi caso...

[masterpuppet]

Es que orden es un Element, si queres acceder al valor de orden deberias utilizar Element.get, algo asi:

Código Javascript:

orden.set('html',orden.get('html') + '|' + fotoId);
 

[ira]

Muchisimas gracias, por el codigo, pero muchisimas por la explicacion...
Lo he entendido perfectamente... que maquina
Al entender esto no solo he solucionado este problema si no muchisimos mas que me salian...
Gracias otra vez

[ira]

Perdona que te haga otra pregunta, he visto que funciona y perfect... Ahora esta cadena la quiero meter en un campo de formulario oculto en el value para luego pasarla para hacer un insert. hago lo mismo con el value???

[ira]

Bueno, me las daba muy felices pero al final he fallado en el planteamiento.

La cadena la hace perfecta, pero el problema es que es un lista de fotos que primero añades (hasta aqui todo bien), pero luego puedes ordenar esta lista, y claro la cadena no va a cambiar sola.

Podrias porfavor indicarme el camino para hacer una funcion que lea todo lo que hay dentro de un div al enviar el form??
a cada foto le he asignado name=id de foto...

[masterpuppet]

Como los estas ordenando ?

[ira]

en origen por el id de la DB, una vez entran en el contenedor de destino por la secuencia de entrada...
Bueno y otra cosa que me acabo de dar cuenta en IE no funciona nada de nada del mootools, pero esto creo que me las puedo apañar....

[masterpuppet]

Deberias mostrar el codigo, y te pregunto se pueden ordenar en el destino ?, tenes el codigo en el domready ?

[ira]

Si, se pueden ordenar en el destino.
El script lo he sacado de aqui: http://soletme.free.fr/dragdrop/index.html
Pero he tenido que modificarlo para corregir un par de bugs que tenia y hacer lo que yo quiera, he tenido que añadir que una vez hayas insertado en la columna de destino una foto no se pueda volver a utilizar... y luego le he añadido un par de lineas para que me muestre tras el evento el ID de la foto y como va quedando la secuencia... mi intencion es luego pasar esa secuencia dentro de un input hidden, he intentado hacerlo, pero no consigo que modifique el value del hidden...
Tambien de alguna forma tengo que añadir un contador para que solo admita 10 fotos...
Estoy en un punto que veo que igual seria mejor no dar la opcion a ordenar la seleccion y hacer 10 destinos diferentes, uno por foto...

Necesitas qeu ponga tambien el html??

<script>
window.addEvent('domready',function(){
var sort = new Sortables($('gridroom2'),{
opacity:0.7
});


$$('.fotobox').addEvent('mousedown',function(event ){
var driver = this;
var clone = driver.clone();
var origin = driver.getPosition();
clone.setStyles({
opacity:0.7,
position:'absolute',
left:origin.x,top:origin.y}).inject(document.body)

var drag = new Drag.Move(clone, {

droppables:[$('gridroom2')],

onEnter:function(dragging, drop){
var sortClone = clone.clone();
sortClone.setStyles({
opacity:1,
position:'static'})
.removeClass('item')
.inject($('gridroom2'));
sort.addItems(sortClone);
clone.store('clone',sortClone);
sort.start(event,sortClone);

},
onLeave:function(dragging, drop){
var sortClone = clone.retrieve('clone');
sort.end();
sort.removeItems(sortClone);
clone.setStyle('display','');
sortClone.destroy();

},
onDrop:function(dragging,drop){
if(drop){
clone.destroy();
var contar = $('elemento');
var orden = document.getElementById('elemento2');
var fotoId = clone.get('name');
var sort_order = ''; // contar.get + driverId + '|';
driver.removeEvents();
driver.setStyles({opacity: 0.7,});
contar.set('html',driverId);
orden.set('html',orden.get('html') + '|' + driverId);

}else{
dragging.get('morph').start({
opacity:0,
left:origin.x,
top:origin.y
}).chain(dragging.destroy.bind(dragging));
}
},
onCancel: function(dragging,drop){
dragging.destroy();
}
}).start(event);

});
});

</script>

[ira]

He estado buscando y he encontrado la clase serialize, creo que esto seria lo correcto para pasar el orden de la lista el problema es que todos los ejemplos que vienen lo hacen con listas li y no con div-
Como podria hacer un serialize de los divs que hay dentro de otro div???

Siento preguntar tanto y muchas gracias

[ira]

Bueno, he llegado a la conclusion que la manera mas simple de hacer esto es hacer una funcion que cuando se envie el formulario cree una variable con todos los elementos que hay dentro de un div.
Ahora mi problema es que no se como hacer que se ejecute esta funcion con mootools y tampoco donde meterla en el domready...

Podrias indicarme el camino para hacer esto???

[masterpuppet]

Es correcto, deberias utilizar Sortable.serialize, este metodo acepta un callback, cuando quieras tener el orden deberias hacer algo asi:

Código Javascript:

var order = sort.serialize(false, function(element, index){
    return element.get('id') + '-' + index;
}).join(',');
 

esto generiaria un string con el siguiente formato: 1-2,2-3,3-1, si el identificador del elemento esta en algun hijo de element lo unico que deberias hacer es un Element.getElement para acceder a el y luego obtener el identificador.

Saludos.

[ira]

Lo primero agradecerte las molestias y tu tiempo, la verdad que soy tan paleto en esto que me cueta un poquillo.
He hecho lo que me dices...

Código Javascript:

onEnter:function(dragging, drop){
    var sortClone = clone.clone();
    sortClone.setStyles({
    opacity:1,
    position:'static'})
    .removeClass('item')
    .inject($('gridroom2'));
    sort.addItems(sortClone);
    clone.store('clone',sortClone);
    sort.start(event,sortClone);
    var order = sort.serialize(false, function(element, index){
    return element.get('title') + '-' + index; // title es donde meto el identificador de cada foto
    }).join(',');
    var mostrar = $('elemento3'); // apartir de aqui es para que me muestre el orden
    mostrar.set('html',order);
 

La verdad que falla no se si es por donde la he colocado, pero al insertar la primera foto en el div me mete dos elementos en el array: id-0,null-1,
Y luego no se si sera por como estoy haciendo que me muestre el resultado, pero solo actua cuando meto foto, si cambio el orden no me muestra ningun cambio, pero si por ejemplo meto fotos, reordeno y luego meto otra foto si me pilla el nuevo orden...
La verdad que de todas las cosas que he probado esto es lo que mas se acerca de todo solo lo del null... aun asi creo que lo ideal seria hacer que se ejecutase esta funcion una vez se envie el formulario... como lo ves???

Muchisimas gracias, aunque no lo termino de conseguir me da ganas de seguir intentandolo...

Saludos

[ira]

Tras unas pruebas, he creado un evento mouseup para que se ejecute al levantar el raton en el gridroom2, y casi casi, de vez en cuando sale algun null...
Voy a probar a que se ejecute al pinchar en un link y que me muestre un alert del array a ver que pasa...

gracias

[ira]

perdon se duplico por la cara

[masterpuppet]

Si te devuelve un title en null es porque hay algún elemento que esta así, deberías comprobar el html, que no tengas elementos de mas, solo te funciona cuando agregas elementos porque lo estas haciendo únicamente en onEnter(al agregar), si queres hacer lo mismo cuando re-ordenas los elementos, deberías agregar el mismo código(o mejor crear una funcion para no repetir codigo) en el onSort del sortable, algo asi:

Código Javascript:

var sort = new Sortables($('gridroom2'),{
    opacity:0.7,
    onSort: function(el, clone){
       var order = this.serialize(false, function(element, index){
          return element.get('title') + '-' + index;
       }).join(',');
       var mostrar = $('elemento3'); // apartir de aqui es para que me muestre el orden
       mostrar.set('html',order);
    }
});
...
 

[ira]

gracias de nuevo, que facil lo explicas todo...

He comprobado lo que me has dicho del html y no hay ningun indice despistao.
La cosa es que en el evento nuevo que he creado, on mouseup cuando sucede en el gridroom, el null aparece solo cuando pincho encima de alguna foto, pero al pinchar en dentro de esta zona en un lugar vacio, desaparece...
Me da que tiene algo que ver con los clones... pero bueno, la idea es que forme el array cuando se envia el formulario por lo que creo que no pasara...

Hago pruebas y te comento.

Muchisimas gracias...


Despues de las pruebas,

He creado un evento para el envio, y me devuelve el array perfectamente, sin ningun null ni nada, todo en su orden. y perfecto...

No se si sera mucho preguntarte com podria hacer para limitar el numero de fotos que puedo meter en el gridroom, habia pensado en crear una variable y que cada vez que haya un drop aumente su valor +1, y en el primer if del drop crear una condicion si var =>10 salta un aviso diciendo que ya hay 10 fotos... Pero ahora que he desccubierto el serielized igual lo mejor seria hacer un check del numero de items del array, la verdad que me gustaria poder añadir la opcion para eliminar una foto del gridroom por si cambian de opinion, asi que creo que lo mejor seria hacerlo atraves del index... Que opinas???

No se como agradecerte las molestias que te has tomado y las explicaciones que me has dado acerca de este tema...

Saludos

ps,,, Un pequeño detalle, no tengo un onsort en el script... por lo que al colocar tu ultimo script en la funcion la rompe o pasa algo que deja de funcionar todo....

[masterpuppet]

Según lo que estas comentando el lugar correcto para el serialize es en el submit del form, deberias quitarlo del onEnter - onSort y agregarlo al evento submit del form y para limitar la cantidad con tener un par de variables (max, total) y controlar que el total no supere el maximo en el onEnter ya estarías.

Saludos.

[ira]

Perdona pero no entiendo muy bien que quieres decir o mejor dicho como hacerlo...
como hago para que cada vez que hay un onDrop (creo que seria mejor ponerlo ahi por si meten la foto pero la sacan a ultima hora) el valor de total aumente???

[masterpuppet]

Si perdon es en el onDrop, seria algo asi:

Código Javascript:

var max  = 10;
var total = 0;
var drag = new Drag.Move(clone, {
    ...
    onDrop: function(dragging, dpop){
        if(total++ > max) return;
        ...
    }
});
 
 
$('form').addEvent('submit', function(e){
    var order = this.serialize(false, function(element, index){
        return element.get('title') + '-' + index;
    }).join(',');
    var mostrar = $('elemento3');
    mostrar.set('html',order);
});
 

luego si agregas lo de eliminar la foto, deberias recordar restar el total.

Saludos.

[ira]

De verdad que al ver tus explicaciones todo resulta tan sencillo, te puedes creer que he estado buscando y leyendo tutos y manuales y no habia conseguido verlo asi.

La parte mala es que no lo hago funcionar... he probado a poner el codigo por si solo o incrustarlo dentro del onDrop que ya tengo en el codigo, pero nada en ambos casos puedo seguir añadiendo imagenes...

Mil gracias...

[masterpuppet]

Proba con detach, algo asi:

Código Javascript:

var max  = 10;
var total = 0;
var drag = new Drag.Move(clone, {
    ...
    onDrop: function(dragging, dpop){
        if(total++ > max) this.detach();
        ...
    }
});
 

si no te funciona comentalo que me creo un sandbox y lo pruebo.

[ira]

Extraño, con el detach me rompe la funcion y no funciona nada...
Lo estoy colocando tal que asi...

Código Javascript:

var max  = 10;
var total = 0;
onDrop:function(dragging,drop){
     if(total++ > max) this.detach();
     if(drop){
...
 

[masterpuppet]

A ver te dejo una implementacion(delete incluido) que me funciona bien,

Código Javascript:

window.addEvent('domready', function(){
 
    document.ondragstart = function () { return false; }; //IE drag hack
  
    var max = 3;
    var total = 0;
    
    $$('.dragable').each(function(drag) {
    
        new Drag.Move(drag, { 
            droppables: '#droppable-holder',
            onDrop: function(el, droppable) {
                var clone = el.clone();
                if(droppable && !el.hasClass('locked')) {                   
                    if(total < max) {                       
                        var a = new Element('a', {
                            text: 'Eliminar',
                            href: '#',                              
                            events: {
                                click: function(e){
                                    e.stop();
                                    clone.destroy();
                                    el.removeClass('locked');
                                    total--;
                                }
                            }
                        }).inject(clone);                       
                        clone.inject(droppable);
                        el.addClass('locked');                      
                        total++;
                    } else {
                        alert('Full List');
                    }
                } 
                
            },
            onEnter: function(el,droppable) {
                droppable.addClass('mo');
            },
            onLeave: function(el,droppable) {
                droppable.removeClass('mo');
            }
        });
 
    });
});
 

Estuve mirando el código que dejaste anteriormente y hay algo que no esta bien en el onEnter y onLeave deberías agregar clases o algo así pero no hacer el inject/remove, el inject depende del onDrop y el remove dependería del botón de eliminar que comentabas en los post anteriores, deberias refactorizar el código antes de seguir.

[ira]

Buenas,

Lo primero agradecerte las molestias, ayer me puse a intentar hacer lo que comentas y me dieron las mil...

Habia llegado a una conclusion parecida acerca de lo de que cambiase la clase en vez de remove inject a la hora de eliminar una foto de la lista. No veia la manera de poder devolver la funcionabilidad de una foto eliminada del droppable.

Tras darle mil vueltas al asunto y teniendo claro gracias a tu explicacion como hacer un contador lo que he hecho ha sido lo siguiente,
Definir la var total y max al inicio del todo
Añadir en el onEnter la condicion que si es menor que el max haga como hasta ahora y , si no nada.
En el onDrop implementar la condicion if drop a if(drop && total < max) y he colocado aqui el total++.

La cosa es que es exactamente lo que pretendia hacer, seguro que hay errores pero la cosa es que funciona, menos en IE que no funciona nada de nada ni siqueira hace los drag...

Bueno todo esto es sin añadir la opcion de eliminar, que lo voy a intentar hacer ahora.
Cuando dices que tengo que factorizar todo es solo para poder añadir lo de eliminar? o es que el script esta fatal???

Muchisimas gracias por tus explicaciones, sin tu ayuda no creo que hubiese conseguido hacer esto en la vida, bueno gual en dos vidas si....