[SOLUCIONADO] Dudas crear array dinamico de lista

No-NaMe · #1 (**permalink**) 03/06/2014, 06:04

Muy buenas, he creado una lista (ul) para que la gente ordene sus preferencias(li) y con jquery hago que esta lista se pueda mover, exactamente con este codigo:

Código HTML:

Ver original<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() {
                $( "#categories" ).sortable();
                $( "#categories" ).disableSelection();
            });
        </script>

esta linea:
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

es para que funcione en móviles (y todo va fino).

Pero ahora me planteo. ¿como puedo crear un array dinamicamente que guarde las posiciones de las distintas opciones? para luego enviarlas mediante un formulario.

Agradeceria unos links a explicaciones de esto, o referencias a manuales para poder aprenderlo y aplicarlo.

Muchas gracias por vuestro tiempo.

No-NaMe · #2 (**permalink**) 03/06/2014, 07:04

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>

bathorz · #3 (**permalink**) 03/06/2014, 09:39

Prueba:

Código Javascript:

Ver original$(document).ready(function() {
 
        $(function() {
          $(".documents").sortable();
          $(".documents").disableSelection();
        });
 
        function disp(li) {
          var array = [];
          for (var i = 0; i < li.length; i++) {
            array.push(li[i].innerHTML);
            array.push($("li")[i].className.slice(5));
          }
          $("span").text(array.join(" "));
        }
 
        $('#boton').on('click', function() {
          disp($("li").toArray());
        })
      });

Código HTML:

Ver originalReversed - <span></span>
    <ul class="documents">
      <li class="item_1">uno</li>
      <li class="item_2">dos</li>
      <li class="item_3">tres</li>
    </ul>
    <input type="button" id="boton" value="actualizar_array" />

No-NaMe · #4 (**permalink**) 04/06/2014, 03:32

Muchas gracias, estaba mal hecho el script por que si había cualquier otro UL-LI en la pagina me lo tomaba como parte del array, así que he rehecho el código, mas abajo esta.
como podras ver tu ayuda me ha venido genial para solventar, lo de la posición con tu linea de código ha quedado resuelto.

Código Javascript:

Ver original$(function () {
                $("#opciones").sortable();
                $("#opciones").disableSelection();
                updateOrder();
                $("#sortButton").click(sortClick);
            });
 
            $('#opciones').sortable().bind('sortupdate', function () {
                updateOrder();
            });
            function updateOrder() {
                var orderArray = [];
 
                $("#opciones li").each(function (i, el) {
                    orderArray.push($(el).text());
                    orderArray.push($("li")[i].className.slice(5));
                });
 
                $("#display").text(orderArray.join(" "));
                
                
            }
 
           function sortClick() {
                updateOrder();
                var serializedArr = JSON.stringify( orderArray );
                $("#display").text("click: " + $("#display").text());
            }

Código HTML:

Ver original<ul>
    <li>rompe</li>
</ul>
<span id="display"></span>
 
<ul id="opciones">
    <li class="item_1">Item 1</li>
    <li class="item_2">Item 2</li>
    <li class="item_3">Item 3</li>
    <li class="item_4">Item 4</li>
    <li class="item_5">Item 5</li>
    <li class="item_5">Item 6</li>
    <li class="item_6">Item 7</li>
</ul>
<p><input type="button" value="actualizar_array" id="sortButton"/></p>