¿Cómo crear una función de arrastrar y soltar para reordenar las imágenes usando HTML CSS y jQueryUI?

Posted on by Rudeus Greyrat

Dada una galería de imágenes, la tarea es reorganizar el orden de las imágenes en la lista o cuadrícula arrastrando y soltando. El marco de la interfaz de usuario de jQuery proporciona una función sortable() que ayuda a reordenar los elementos de la lista con el mouse. Con esta funcionalidad, los elementos de la lista se vuelven intercambiables. La interfaz de usuario de jQuery proporciona una función sortable() con propiedades arrastrables predeterminadas. Todos los elementos de la lista en el documento HTML son intercambiables y se reordenan para su visualización. El usuario puede arrastrar y soltar elementos a una nueva posición con la ayuda del mouse. Otros elementos se ajustan para encajar en la lista.

Creación de estructura: en esta sección, normalmente incluimos el enlace y las bibliotecas jQueryUI requeridos. Además, crearemos una galería de imágenes básica donde realizaremos la funcionalidad de arrastrar y soltar para reordenar la lista de la galería.

  • Incluyendo todas las bibliotecas jQuery y jQuery UI requeridas:

    <enlace href = «https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css» rel = «hoja de estilo»>
    <script src = «https://code. jquery.com/jquery-1.10.2.js”></script>
    <script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

  • Código HTML para crear estructura:

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            How to create drag and drop
            features for images reorder
            using HTML CSS and jQueryUI?
        </title>
    </head>
           
    <body>
        <h1 style="color:green">GeeksforGeeks</h1> 
          
        <b>Drag and drop using jQuery UI Sortable</b>
          
        <div class="height"></div><br>
          
        <div id = "imageListId">
            <div id="imageNo1" class = "listitemClass">
                <img src="images/geeksimage1.png" alt="">
            </div>
              
            <div id="imageNo2" class = "listitemClass">
                <img src="images/geeksimage2.png" alt="">
            </div>
              
            <div id="imageNo3" class = "listitemClass">
                <img src="images/geeksimage3.png" alt="">
            </div>
              
            <div id="imageNo4" class = "listitemClass">
                <img src="images/geeksimage4.png" alt="">
            </div>
              
            <div id="imageNo5" class = "listitemClass">
                <img src="images/geeksimage5.png" alt="">
            </div>
              
            <div id="imageNo6" class = "listitemClass">
                <img src="images/geeksimage6.png" alt="">
            </div>
        </div>
          
        <div id="outputDiv">
            <b>Output of ID's of images : </b>
            <input id="outputvalues" type="text" value="" />
        </div>
    </body>
      
    </html>

Diseñar la estructura: en esta sección, diseñaremos la estructura creada previamente y agregaremos la función de arrastrar y soltar agregando código JavaScript.

  • Código CSS para diseñar la estructura:

    <style>
      
        /* text align for the body */
        body {
            text-align: center;
        }
          
        /* image dimension */
        img {
            height: 200px;
            width: 350px;
        }
          
        /* imagelistId styling */
        #imageListId {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
           
        #imageListId div {
            margin: 0 4px 4px 4px;
            padding: 0.4em;
            display: inline-block;
        }
          
        /* Output order styling */
        #outputvalues {
            margin: 0 2px 2px 2px;
            padding: 0.4em;
            padding-left: 1.5em;
            width: 250px;
            border: 2px solid dark-green;
            background: gray;
        }
           
        .listitemClass {
            border: 1px solid #006400;
            width: 350px;
        }
           
        .height {
            height: 10px;
        }
    </style>
  • Código JS para agregar la funcionalidad:

    <script>
        $(function() {
            $("#imageListId").sortable({
                update: function(event, ui) {
                        getIdsOfImages();
                    } //end update         
            });
        });
      
        function getIdsOfImages() {
            var values = [];
            $('.listitemClass').each(function(index) {
                values.push($(this).attr("id")
                            .replace("imageNo", ""));
            });
            $('#outputvalues').val(values);
        } 
    </script>

Solución final: en esta sección, combinaremos todos los códigos de las secciones anteriores y lograremos nuestra tarea en la que puede arrastrar y soltar para reordenar las imágenes en la galería de imágenes.

  • Programa:

    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            How to create drag and drop
            features for images reorder
            using HTML CSS and jQueryUI?
        </title>
          
        <link href = 
    "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
                rel = "stylesheet">
          
        <script src = 
    "https://code.jquery.com/jquery-1.10.2.js">
        </script>
          
        <script src = 
    "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
        </script>
              
        <style>
      
            /* text align for the body */
            body {
                text-align: center;
            }
      
            /* image dimension */
            img{
                height: 200px;
                width: 350px;
            }
      
            /* imagelistId styling */
            #imageListId
            { 
            margin: 0; 
            padding: 0;
            list-style-type: none;
            }
            #imageListId div
            { 
                margin: 0 4px 4px 4px;
                padding: 0.4em;             
                display: inline-block;
            }
      
            /* Output order styling */
            #outputvalues{
            margin: 0 2px 2px 2px;
            padding: 0.4em; 
            padding-left: 1.5em;
            width: 250px;
            border: 2px solid dark-green; 
            background : gray;
            }
            .listitemClass 
            {
                border: 1px solid #006400; 
                width: 350px;     
            }
            .height{ 
                height: 10px;
            }
        </style>
              
        <script>
            $(function() {
                $( "#imageListId" ).sortable({
                update: function(event, ui) {
                    getIdsOfImages();
                }//end update         
                });
            });
              
            function getIdsOfImages() {
                var values = [];
                $('.listitemClass').each(function (index) {
                    values.push($(this).attr("id")
                            .replace("imageNo", ""));
                });
                  
                $('#outputvalues').val(values);
            }
        </script>
    </head>
          
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
          
        <b>Drag and drop using jQuery UI Sortable</b>
          
        <div class="height"></div><br>
          
        <div id = "imageListId">
            <div id="imageNo1" class = "listitemClass">
                <img src="images/geeksimage1.png" alt="">
            </div>
              
            <div id="imageNo2" class = "listitemClass">
                <img src="images/geeksimage2.png" alt="">
            </div>
      
            <div id="imageNo3" class = "listitemClass">
                <img src="images/geeksimage3.png" alt="">
            </div>
      
            <div id="imageNo4" class = "listitemClass">
                <img src="images/geeksimage4.png" alt="">
            </div>
      
            <div id="imageNo5" class = "listitemClass">
                <img src="images/geeksimage5.png" alt="">
            </div>
      
            <div id="imageNo6" class = "listitemClass">
                <img src="images/geeksimage6.png" alt="">
            </div>
        </div>
              
        <div id="outputDiv">
            <b>Output of ID's of images : </b>
            <input id="outputvalues" type="text" value="" />
        </div>
    </body>
      
    </html>
  • Producción:

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *