Hola,
En un formulario tengo una lista de imágenes las cuales pueden ser reordenadas mediante drag and drop (sortable) con jQueryUI.
El órden que se defina antes de enviar el formulario será almacenado con PHP en una base de datos.
Entonces lo que estoy tratando de hacer para obtener el órden final es obtener el index del elemento <li> "arrastable" y almacenarlo en un input oculto.
Al cargar el documento todo va bien, los inputs ocultos obtienen el valor correcto, sin embargo al reordenarlos, los valores no corresponden a lo que necesito.
Este es mi código:
Código Javascript
:
Ver original<ul id="sortable">
<?php foreach ($imagenes as $imagen) : ?>
<li class="sort-element" id="orden_<?php echo $imagen->id; ?>">
<img src="<?php echo img_url();?>portafolio/fotos/<?php echo $imagen->archivo; ?>" alt="Fotografías" height="80" />
<input type="hidden" class="indices" name="orden_<?php echo $imagen->id; ?>" id="orden_<?php echo $imagen->id; ?>" />
<script type="text/javascript">
$(function() {
var valor = $("li#orden_<?php echo $imagen->id; ?>").index(".sort-element");
$("input#orden_<?php echo $imagen->id; ?>").val(valor+1);
});
</script>
</li>
<?php endforeach; ?>
</ul>
Cuando arrastro el primer elemento (index 1) y lo pongo sobre el cuarto elemento (index 4), el input oculto del primer elemento toma el index 4, sin embargo los inputs del resto de los elementos no obtienen el nuevo index que le corresponde sino que permanece con el original.
Yo entiendo que falta una función que actualice el valor del resto, pero no visualizo cómo realizarla.
¿Alguna idea?
Gracias