2

Tengo una tabla con diferentes filas y campos, en una fila tengo dos campos con display:none; y al hacer un drag de esta fila, hay un efecto como de padding lateral en el <tbody>y en el <thead>, la tabla no se encoge, lo que se encoge son estos elementos.

En el JsFiddle que dejo a continuación, en la primera fila pasa lo comentado anteriormente, en cambio en la segunda que solo hay un elemento con display:none;no pasa.

https://jsfiddle.net/w52m5ggb/20/

Ante cualquier duda preguntar, llevo bastante tiempo con esto.

Al principio pensaba que se podría solucionar buscando la cantidad de elementos <td>con la clase .hidden-td(clase que tiene un display:none;) y buscar el elemento con la clase .placeholder-style(es la clase que tiene el <tr>que se genera al hacer el drag) y añadirle tantos <td>como hay en el <tr>que estoy moviendo, pero no (posiblemente, también esta mal planteado).

3
  • Eso pasa porque tu primer fila tiene 9 elementos, mientras tus demás filas tienen 8, y en tu función start() sólo ocultas una columna en tu placeholder, entonces al hacer drag a la primer fila, queda una columna en tu placeholder sin aplicar la clase hidden-td y por eso queda ese espacio al final de tus columnas. ¿Qué tan seguido es que tu tabla tenga elementos ocultos y que no sea la misma cantidad entre filas?
    – Yikarus
    el 18 nov. 2017 a las 16:53
  • Gracias por tu respuesta @Yikarus bien explicado y bien entendido por mi parte, en el código real a veces hay 8 columnas en la fila, se reduce y varias se ponen en display:none;, luego alomejor vuelve a aparecer una; con lo cual se tendría que hacer de manera dinámica, que en cada momento sepa cuantos elementos están hidden y haga el drag correctamente en cada momento. el 19 nov. 2017 a las 16:34
  • Esto lo podríamos hacer con la siguiente línea de código: var numcells = $('.hidden-td').length; @Yikarus alguna idea de como seguir? el 19 nov. 2017 a las 16:36

2 respuestas 2

2
+100

He dado solución a tu problema haciendo lo siguiente:

La lógica que implemente es simple, hay n cantidad de columnas visibles en la tabla, la idea es saber exactamente cuantas hay y comparar con la cantidad de columnas que tiene cada <tr>, después por medio del selector :nth-child() seleccionamos la cantidad de columnas sobrantes y le asignamos la clase .hidden-td

$("#tabs").tabs();

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    placeholder: "placeholder-style",
    start: function(event, ui) {
    
    var cantidad_real = $('.table thead tr th:visible').length;
      var cantidad_actual = $(this).find('.placeholder-style td').length;
        
    	if(cantidad_actual > cantidad_real){
        var cantidad_a_ocultar = (cantidad_actual - cantidad_real);
        
        for(var i = 0; i <= cantidad_a_ocultar; i++){
            $(this).find('.placeholder-style td:nth-child('+ i +')').addClass('hidden-td');
        }
      }
      
      ui.helper.css('display', 'block');
      ui.helper.css('width', '100% !important');
     
    },
    stop: function(event, ui) {
        ui.item.css('display', '')
    },
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        location.reload();        
       });
    }
}).disableSelection();
img {
  width: 100px;
}
.hidden-td{
  display:none !important;
}
.table{
  background-color:green;
  border:0;
}
.trdrag{
  background-color:yellow;
}
.thcenter{
  background-color:grey !important;
}
.ui-sortable-helper {
  left:0px!important;
}
.idrow{
  width:5%;
}
.tdvisible{
  width:5%;
}
.tdslug{
  width:10%;
}
.tdimg{
  width:15%;
}
.tdorder{
  width:20%;
}
.tdacciones{
  width:40%;
}

@media (max-width: 500px){
  .ocultarid{
    display:none;
  }
  .tdslug{
    width:15%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="tabs">
        <div class="col-md-12">
            <div id="table1">
              <table class="table">
                <thead>
                  <tr>
                    <th class="thcenter ocultarid">ID</th>
                    <th class="thcenter">Visible</th>
                    <th class="thcenter">Nombre</th>
                    <th class="thcenter">Header</th>
                    <th class="thcenter">Home</th>
                    <th class="thcenter">Orden</th>
                    <th class="thcenter"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
                  </tr>
                </thead>
                <tbody id="tbodyproject"> 
                    <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter ocultarid"><p id="margindata">1</p></td>
                      <td  class="hidden-td" style="display:none;">Testing</td>
                      <td  class="hidden-td" style="display:none;">Testing2</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter ocultarid"><p id="margindata">2</p></td>
                      <td style="display:none;">Testing</td>
                      <td style="display:none;">Testing</td>
                      <td style="display:none;">Testing</td>
                      <td style="display:none;">Testing</td>
                      <td style="display:none;">Testing</td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter ocultarid"><p id="margindata">3</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter ocultarid"><p id="margindata">1</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter ocultarid"><p id="margindata">4</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                    <tr id="id2" class="trdrag">
                      <td class="idrow tdcenter ocultarid"><p id="margindata">5</p></td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 2</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">

                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 2">Delete
                      </form>
                      </td>
                    </tr>
                </tbody>
              </table>
              <br><br>
            </div>
        </div>

7
  • Gracias por tu respuesta Camilo, pero hay un problema y es que algunas veces hay 2 campos, otras 3, otras 1, de manera que habría que hacerlo dinámico, encontrando primero cuantos campos hidden hay y a partir de ahí añadir la clase hidden, estoy en ello. el 20 nov. 2017 a las 15:10
  • Hola @LluísPuigFerrer, ya te he editado la respuesta con la forma dinámica. el 20 nov. 2017 a las 15:14
  • lo veo bastante lioso, funcionar funciona, pero lo veo además 'limitado'. Te dejo este JsFiddle con cambios en el CSS como tengo en el código real, si pruebas a hacer pequeña la pantalla veras que vuelvo a tener el problema porque he ocultado otras columnas. jsfiddle.net/3g3bt80e/3 el 20 nov. 2017 a las 16:11
  • Pero veo que sigues usando la opción estática y no la dinámica que te coloqué en la edición a la respuesta el 20 nov. 2017 a las 16:14
  • Perdona, es que estoy probando varias maneras y se me olvido ponerlo! Aquí tienes jsfiddle.net/3g3bt80e/4 el 20 nov. 2017 a las 16:20
-1

Es la solución mas rápida que he encontrado, espero que te sirva.

La idea es añadir en el sortable en la start function lo siguiente:

start:function(event, ui) {
  var hidden = ui.helper.find('td').map(function(i,el){
    if(this.style.display == 'none' || $(this).hasClass('hidden-td'))
        return this;
  }).length;

  if(hidden > 0){
    ui.placeholder.find('td').each(function(i,e){
      if(i<hidden)
          $(this).remove();
    });
  }
  ui.helper.css('display', 'table')
}

El javascript quedaría así por si quieres copiarlo entero:

$("#tabs").tabs();

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    placeholder: "placeholder-style",
    start:function(event, ui) {
      var hidden = ui.helper.find('td').map(function(i,el){
        if(this.style.display == 'none' || $(this).hasClass('hidden-td'))
            return this;
      }).length;

      if(hidden > 0){
        ui.placeholder.find('td').each(function(i,e){
          if(i<hidden)
              $(this).remove();
        });
      }
      ui.helper.css('display', 'table')
    },
    stop: function(event, ui) {
        ui.item.css('display', '')
    },
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        location.reload();        
       });
    }
}).disableSelection();

Este seria el jsfiddle donde funciona: https://jsfiddle.net/maxik_95/Lge4bgey/2/

3
  • Gracias por la respuesta Marc, es recomendable que al adjuntar una respuesta si puedes, pongas o todo el código o dejes en enlace a un JsFiddle, estoy probando tu código y no me funciona correctamente, si puedes déjame un JsFiddle para contrastar el 21 nov. 2017 a las 11:17
  • @LluísPuigFerrer he comprovado el codigo y si que fallaba un poco, lo he arreglado y te he añadido el link de jsfiddle, por si acaso te dejo el link aqui tambien: jsfiddle.net/maxik_95/Lge4bgey/2 el 22 nov. 2017 a las 18:58
  • Este sábado probare el código, gracias! el 23 nov. 2017 a las 14:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.