español - leyendo una lista ordenada de arrastrar y soltar a través de JavaScript

javascript pdf

Question

Tengo una aplicación (arrastrar y soltar usando JqueryUI.GridSort) que permite al usuario cargar fotos, y luego ordenar las fotos en el orden en que les gustaría usar arrastrar y soltar.

En la carga de la página, se le solicita al usuario que cargue las fotos que se publican en la página siguiente. Cuando llegan a la página siguiente, mi script php crea un <ul id="sortable"> contiene <li> para cada uno de los archivos que cargan. Para cada imagen que han subido al sitio, se crea un nuevo <li> . Dentro de ese <li> está un <img> que establece la imagen para <li> con la imagen que cargaron.

Mi objetivo es poder "guardar" el orden de las imágenes después de que las hayan dispuesto en la interfaz de arrastrar y soltar. Por ejemplo, una vez que hayan terminado de organizar y ordenar las imágenes en el orden en que las quieren, me gustaría poder enviarles otra página que cree un archivo xml (no necesito ayuda con el XML, solo guardo el orden) con el uso de la lista que crearon en el orden correcto.

Después de horas jugando con PHP, me di cuenta de que, debido a que PHP es un lenguaje de servidor, no puede ver lo que se ordena después de la renderización. Entonces mi pregunta es, ¿hay alguna manera de que JavaScript o Ajax lean el orden actual de la lista y lo publiquen en la página siguiente? Si sabe cómo, ¿podría proporcionarnos un ejemplo de ambos, el POST de una página y la publicación recibida por otra? No estoy muy familiarizado con Ajax.

Muchas gracias por cualquier ayuda que pueda brindar.

Código de muestra (El contenido de la declaración foreach que crea un LI para cada archivo cargado)

 $imgID++;


echo ''<li class="ui-state-default"><img id="''.$imgID.''"''.'' src="user_files/''.$file_name.''" draggable="true" height="90" width="95"></li>'';

EDITAR

main page :


<script>
$(''#my_form'').on(''submit'', function() {
    var ordered_list = [];
    $("#sortable li img").each(function() {
        ordered_list.push($(this).attr(''id''));
    });
    $("#ordered_list_data").val(JSON.stringify(ordered_list));
});
</script>
<div id="tesT">
<form id="my_form" action="update_data.php">
    <!-- other fields -->
    <input type="hidden" id="ordered_list_data"></input>
    <input type="submit" value="Proceed to Step 2"></input>
</form>
</div>


update_data.php:

<?php
    // process other fields as normal
    if(isset($_POST[''ordered_list_data''])) {
        $img_ordering = json_decode($_POST[''ordered_list_data'']);
echo "1";
    } else {
       echo "nodata";
    }
    // do things with the data

?>

Answer 1

Construí un JSFiddle haciendo básicamente lo mismo que David publicó.

Agregué una pieza para escribir el resultado en un div en la página, para que pueda ver lo que está pasando:

<input type="button" id="savebutton" value="save"/>
<div id="output"></div>
<form id="listsaveform" method="POST" action="script.php">
    <input type="hidden" name="list" id="hiddenListInput" />
</form>

Javascript:

$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
});

var LISTOBJ = {
    saveList: function() {
        var listCSV = "";
        $( "#sortable li" ).each(function() {
            if (listCSV === "") {
                listCSV = $(this).text();
            } else {
                listCSV += "," + $(this).text();
            }
            $("#output").text(listCSV);
            $("#hiddenListInput").val(listCSV);
            //$("#listsaveform").submit();
        });
    }
}

Answer 2

Si está utilizando un <form> , puede hacer algo como esto (suponiendo que se esté utilizando jQuery):

$(''#my_form'').on(''submit'', function() {
    var ordered_list = [];
    $("#sortable li img").each(function() {
        ordered_list.push($(this).attr(''id''));
    });
    $("#ordered_list_data").val(JSON.stringify(ordered_list));
});

Básicamente, lo que estás haciendo es recorrer el <ul> , ir a buscar cada <img> y anexar los ids (en orden de aparición) a un array. Las matrices conservan el orden en JavaScript y JSON, por lo que uno puede convertirlo en una cadena JSON utilizando la función JSON.stringify , establecerlo como el valor de un campo <input type="hidden"> y luego enviar el formulario.

Si desea usar AJAX, la funcionalidad es muy similar. Sin embargo, en lugar de usar un onsubmit (u onclick ) usaría $.post .

Vámonos con la opción <form> ya que es más simple. Todo dicho, tendrás algo similar al JS anterior junto con HTML como este:

<form id="my_form" method="post" action="./update_data.php">
    <!-- other fields -->
    <input type="hidden" name="ordered_list_data" id="ordered_list_data"></input>
    <input type="submit" value="Submit"></input>
</form>

Luego, en update_data.php (o como se llame su script):

<?php
    // process other fields as normal
    if(isset($_POST[''ordered_list_data''])) {
        $img_ordering = json_decode($_POST[''ordered_list_data'']);
    } else {
        // handle case where there is no data
    }
    // do things with the data
?>