PHP - Sortable Drop and Drag

 
Vista:

Sortable Drop and Drag

Publicado por francisco (10 intervenciones) el 11/05/2019 13:22:38
Buenas tardes,

estoy trabajando con un código que encontré por la web, mi idea es crear un sortable que me permita mover las celdas pero que también se guarden en mi base de datos y es lo que no consigo, no se si me podéis ayudar.

Muchas gracias.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="en">
<head>
  <title>Caballero Moda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 155px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 155px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable1" class="connectedSortable">
 
    <?php
 
            require('db_config.php');
 
            $sql = "SELECT * FROM `caballero moda` WHERE Columna='1' ORDER BY Balda" ;
 
              $users = $mysqli->query($sql);
            while($user = $users->fetch_assoc()){
 
            ?>
              <tr>                     <li class="ui-state-default"><td><a href=https://www.sprinter.es/catalogo-deportivo?search=<?php echo $user['Referencia'] ?>><?php echo $user['Referencia'] ?></a><?php echo $user['Marca'] ?><?php echo $user['Precio'] ?></td></li>
 
                </tr>
            <?php } ?>
 
</ul>
 
<ul id="sortable2" class="connectedSortable">
 <?php
 
            require('db_config.php');
 
            $sql = "SELECT * FROM `caballero moda` WHERE Columna='2' ORDER BY Balda" ;
 
              $users = $mysqli->query($sql);
            while($user = $users->fetch_assoc()){
 
            ?>
              <tr>                     <li class="ui-state-highlight"><td><a href=https://www.sprinter.es/catalogo-deportivo?search=<?php echo $user['Referencia'] ?>><?php echo $user['Referencia'] ?></a><?php echo $user['Marca'] ?><?php echo $user['Precio'] ?></td></li>
 
                </tr>
            <?php } ?>
 
 
</body>
<script type="text/javascript">
    $( ".connectedSortable" ).sortable({
        delay: 150,
        stop: function() {
            var selectedData = new Array();
            $('.connectedSortable>tr').each(function() {
                selectedData.push($(this).attr("id"));
            });
            updateOrder(selectedData);
        }
    });
 
    function updateOrder(data) {
        $.ajax({
            url:"ajaxPro.php",
            type:'post',
            data:{position:data},
            success:function(){
                alert('your change successfully saved');
            }
        })
    }
</script>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Mauro
Val: 1.668
Plata
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Sortable Drop and Drag

Publicado por Mauro (467 intervenciones) el 11/05/2019 15:38:32
La parte del frontend la tienes que hacer con javascript (Supongo que con el código que tienes deberías andar bien), por la parte del backend, puedes usar un script php que reciba el orden en que están los elementos y los guarde así en la base de datos.

En todo caso, necesitarás una columna que sea el número de posición de cada elemento y, al levantar esos datos, usarla como criterio de ordenamiento.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar