Programando PHP: Jqueryui: Sortable con grid


<!doctype html>

<html lang="es">

<head>

  <meta charset="utf-8">

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>

  #sortable { list-style-type: none; margin: 0; padding: 0; width: 650px; }

  #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }

  </style>

  <script>

  $(function() {

    $( "#sortable" ).sortable();

    $( "#sortable" ).disableSelection();

  });

  </script>

</head>

<body>

 <ul id="sortable">

    <li id="1"><img src="images/foto1.jpg" style="height:100%;"></li>

    <li id="2"><img src="images/foto2.jpg" style="height:100%;"></li>

    <li id="3"><img src="images/foto3.jpg" style="height:100%;"></li>

    <li id="4"><img src="images/foto4.jpg" style="height:100%;"></li>

</ul>

   

<div style="width:100%;float:left;">

    <input id="btnOrdenar" type="button" value="Guardar esta ordenación">

</div>



<script>

    $(function() {

        /*

       // para q lo haga cada vez q se mueva uno, pero esto es mortal para la BD

       $("#sortable").sortable({

             stop: function ( event, ui){

               var arrIds = $(this).sortable('toArray');

               alert(arrIds);

           }

       });

       */

      // Que solo se ordene en BD cdo se le de al boton

      $("#btnOrdenar").click(function(event, ui) {

          var arrIds = $("#sortable").sortable('toArray');

          alert(arrIds);

          $.ajax({

            ...

          });

      });

    });

</script>

</body>

</html>
Programando PHP

ccc

Jqueryui: Sortable con grid

No hay comentarios:

Publicar un comentario
