Despues de investigar ya he conseguido crear un array y que las cosas se muevan.
Ahora solo me faltarian 2 cosas, como le puedo decir para que en onclick actualize el orden del array y si podria guardar otro dato que seria el nombre de la clase, pero eliminando la palabra item (así ya tendría su posición original).
Aqui el codigo que me esta funcionand hasta ahora (si podeis me guiais y me decis si voy bien encaminado o lo estoy haciendo mal)
Código HTML:
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<script>
$(function() {
$( ".documents" ).sortable();
$( ".documents" ).disableSelection();
});
</script>
<meta charset="utf-8">
<title>toArray demo</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
Reversed - <span></span>
<ul class="documents">
<li class="item_1">uno</li>
<li class="item_2">dos</li>
<li class="item_3">tres</li>
</ul>
<script>
function disp( li ) {
var a = [];
for ( var i = 0; i < li.length; i++ ) {
a.push( li[ i ].innerHTML );
}
$( "span" ).text( a.join( " " ) );
}
disp( $( "li" ).toArray() );
</script>
<input type="button" value="actualizar_array" onclick="disp( li )" />
</body>
</html>