JQuery-UI ordenable en el formulario enviar

Question

Las imágenes se cargan desde la base de datos. Me gustaría ordenar el orden de las imágenes con el ordenamiento JQuery-UI y guardar los datos en el envío del formulario.

<script type="text/javascript"> 
    $(function() { 
     $("#sortable").sortable({ 
      placeholder: "ui-state-highlight", 
      cursor: 'crosshair' 
    }); 
     $("#sortable").disableSelection(); 
}); 
</script> 

---

<form action="" method="post"> 
<ul id="sortable" style="width: 524px;"> 
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li> 
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li> 
</ul> 
<div style="clear:both;"></div> 
<input name="Submit" value="RE-ORDER" type="submit" /> 
</form> 

Answer 1

aquí es una solución básica como por mi pensamiento

crear un campo oculto y almacenar su orden en ella.

<script type="text/javascript"> 
    $(function() { 
     $("#sortable").sortable({ 
      placeholder: "ui-state-highlight", 
      cursor: 'crosshair', 
      update: function(event, ui) { 

     var Order = $("#sortable").sortable('toArray').toString(); 
     $('#order').val(Order); 
} 
    }); 
     $("#sortable").disableSelection(); 
}); 
</script> 

<form action="" method="post"> 
<ul id="sortable" style="width: 524px;"> 
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li> 
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li> 
</ul> 
<div style="clear:both;"></div> 
<input name="order" type="hidden" /> 
<input name="Submit" value="RE-ORDER" type="submit" /> 
</form> 

ahora usted puede conseguir el fin de order.

Answer 2

Cuando ordena cada vez, actualice los valores a un campo de entrada oculto usando update: function(){} en orden. Aquí está mi código que actualiza la entrada oculta cuando ordena cada vez. Cuando se envía el formulario, los valores se enviarán al servidor.

<form action="" method="post"> 
    <input type="hidden" id="image_order" name="image_order" value="" /> 
<ul id="sortable" style="width: 524px;"> 
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li> 
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li> 
</ul> 
<div style="clear:both;"></div> 
<input name="Submit" value="RE-ORDER" type="submit" /> 
</form>​ 


$(function() { 
     $("#sortable").sortable({ 
      placeholder: "ui-state-highlight", 
      cursor: 'crosshair', 
      update: function(event, ui) { 
       var order = $("#sortable").sortable("toArray"); 
       $('#image_order').val(order.join(",")); 
       alert($('#image_order').val()); 
      } 
    }); 
     $("#sortable").disableSelection(); 
});​ 

Aquí está el demo.