miércoles, 6 de febrero de 2008

mootools: sortable of sortables

Armé una demo de un sortable que contiene a otros tres sortables. Hace un tiempo había hecho la misma prueba pero con prototype+scriptaculus, la verdad que es mucho mas transparente con mootools y el código queda mucho mas limpio:


var master = new Sortables('master', { handle: 'span'});

var mySortables = new Sortables([$('lista_A'), $('lista_B'), $('lista_C')], {
cloneOpacity: 0.4,
elementOpacity: 0.8
});


La demo está funcionando en opera, safari, firefox, iexplorer y camino sin tener que hacer ningún hack por el browser; mootools se encarga solito!

En la demo  se pueden dragear los items dentro de una misma lista, entre las listas y también se puede hacer un drag desde la parte naranja para intercambiar una lista completa con otra.

Esta es otra demo que encontré pero usa scriptaculus.


martes, 5 de febrero de 2008

script tag

Haciendo unas pruebas con los sortables de mootools me encuentro con que el ejemplo que armé no funciona en FF pero si en Safari. Me pongo a tratar de encontrar el error y para eso voy sacando todo el código que encuentro por el camino con la idea de aislarlo. Llego al punto en el que simplemente defino una función en js y la llamo en el onclick de un button (nada mas simple); pero en FF me tira un error diciendo que la función no está definida. Pruebo de borrar una referencia a un js externo y comienza a funcionar.

¿Qué pasó? No había cerrado el tag de script en forma explícita.
Para el tag script la w3c dice: Start tag: required, End tag: required

<script scr="mootools.js" />

La forma correcta es:
<script scr="mootools.js"></script>

Dejo 2 links al respecto: