Cómo ordenar las imágenes en jquery/php/mysql mismo como google picassa reordenar la interfaz?

Estoy utilizando PHP/MYSQL.

Quiero crear una galería de imágenes para la clasificación de imágenes. Usuario arrastrar y soltar imágenes para ordenar y organizar sus imágenes. Como picassa hacer esto.

He creado una página mediante el uso de jQuery UI ordenable plug-in: http://jqueryui.com/demos/sortable/#display-grid

Página De Demostración: http://jsbin.com/oqani/9/

Sus arrastrando y soltando las imágenes correctamente. Pero yo no soy capaz de conseguir que el actual orden de las imágenes después de que el usuario hace con la clasificación de las imágenes. Una vez conseguiré orden actual que tengo que guardar ese orden en db para que la imagen en particular.

Supongamos que tengo imágenes 1, 2, 3, 4, 5, 6, 7, 8, 9 el fin de, a continuación, utilicé imágenes y el orden se convirtió en 1, 3, 4, 7, 8, 2, 5, 6, 9. Así sucesivamente clic en «Mostrar Pedido» debería mostrarme el orden como 1, 3, 4, 7, 8, 2, 5, 6, 9.

Puede alguien por favor me ayude a mostrar el actual orden de las imágenes en el clic de «Mostrar Pedido» y también me dan un concepto de cómo voy a poner el orden actual para una imagen en particular en DB.

Gracias

InformationsquelleAutor Prashant | 2010-02-24

2 Kommentare

  1. 1
    jQuery("#contentSortableUL").sortable({
        opacity: 0.6,
        cursor: "move",
        update: function(){
            var order = $(this).sortable("serialize"); 
            jQuery.post("update-sorting.php", order, function(theResponse){
                //Callback code here
            });
        }
    });

    Para actualizar la base de datos que usted necesita escribir el código de la update-sorting.php página:

    <?php
    /* code in update-sort.php would look like */
    include("includes/db.connection.php");
    
    $updateRecordsArray = $_POST['recordsArray'];
    $listingCounter = 1;
    $orderedImageIds = array();
    
    foreach ($updateRecordsArray as $recordIDValue){
        $listingCounter = $listingCounter + 1;
    
        /* update query goes here */
        update tableName set order = $listingCounter 
    }
    ?>

    Espero que ayude.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea