1

Tengo una tabla con un estilo, y al hacer un drag de una fila el estilo se cambia.

He mirado con el inspeccionar elemento, pero no soy capaz de dar con la solución.

Así se ve la tabla sin hacer click:

introducir la descripción de la imagen aquí

Y así se ve al hacer un drag de una fila (mientras mantengo seleccionada la fila, hasta que hago el drop)

introducir la descripción de la imagen aquí

La vista se ve así:

<div id="tabs">
        <div class="col-md-12">
            <div id="table1">
              <table class="table">
                <thead>
                  <tr>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByIdAsc"></span></a>-->ID<!--<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a>--></th>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderBySlugAsc"></span></a>-->Visible<!--<a href="{{route('admin.projects.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDown"></span></a>--></th>
                    <th><!--<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByOrderAsc"></span></a>-->Nombre<!--<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByOrderDesc"></span></a>--></th>
                    <th>Header</th>
                    <th>Home</th>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByPublicAsc"></span></a>-->Orden<!--<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByPublicDesc"></span></a>--></th>
                    <th><span class="glyphicon glyphicon-cog"></span>Acciones</th>
                  </tr>
                </thead>

                <tbody id="tbodyproject"> 
                  @foreach ($projects as $key => $project)
                    <tr id="{{$project->id}}" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">{{$project->id}}</p></td>
                      <td class="tdcenter"> @if ($project->public == '1')
                          <i class="fa fa-check" aria-hidden="true" id="margindata"></i>

                      @else
                      <i class="fa fa-times" aria-hidden="true" id="margindata"></i>
                      @endif
                      </td>
                      <td><p id="margindata">{{$project->slug}}</p></td>
                      <td><img src="{{ asset('/storage/projects/'.$project->slug.'/header.jpg') }}" class="sizeheader"></td>
                      <td><img src="{{ asset('/storage/projects/'.$project->slug.'/home.jpg')}}" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">{{$project->order}}</p></td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                      <td><!--<a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm" id="margindata">View</a>-->
                          <a href="{{ route('admin.project.edit', $project->id)}}" 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="{{Session::token()}}">
                                        {{method_field('DELETE')}}
                      </td>
                      </form>
                    </tr>
                  @endforeach
                </tbody>
              </table>
              <br><br>
            </div>
        </div>
    </div>

El jquery es este:

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

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function(e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");
        ui.draggable.remove();
    }
});

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    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();

¿Como podría hacer para mantener el estilo del que estoy haciendo un drag 'n' drop? Para distinguirlo un poco, me gustaría añadirle un background tal vez un poco mas oscuro, pero no quiero que se mueva tanto para la izquierda y se vea tan pequeño.

JSFiddle reproduciendo el problema: https://jsfiddle.net/w52m5ggb/

2 respuestas 2

1

Tu problema es el tag <form>, que no debería estar ahí: un <tr> sólo admite como contenido <td> o <th>.

Así que el código:

<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
   <td>
     ...
   </td>
</form>

Deberías cambiarlo a:

<td>
  <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">

     ...
  </form>
</td>

Y dejará de partirte tu fila en dos.

Ahora está el tema del ancho de cada celda: en una tabla, todas las celdas tienen un ancho (por defecto) que viene impuesto por la celda que necesite más anchura. En este caso la anchura de la columna "Nombre" viene dado precisamente por el header (th). Cuando estás moviendo la fila, la estás "sacando" de la tabla, es como si estuviese en una tabla distinta y entonces las celdas automáticamente cogen el ancho que necesitas. Lo puedes solucionar dando a cada columna un ancho fijo (un porcentaje, por ejemplo) ya que el ancho total de la fila sí se mantiene estable.

3
  • Gracias Pablo, bien visto! Ahora solo faltaría algo tipo padding entre los elementos de cada fila. No hay ninguna manera de mantener el mismo estilo que antes de hacer el drag? @PabloLozano el 18 sep. 2017 a las 13:21
  • @LluísPuigFerrer Te he actualizado la respuesta, espero que te ayude el 18 sep. 2017 a las 13:32
  • Trabajando con porcentajes de anchura por cada elemento <td> se ve algo mejor, pero es como si la anchura total no fuera el 100%. De igual manera, gracias! el 18 sep. 2017 a las 13:43
0

Si lo único que quieres es ordenar, no debería hacerte falta el .droppable(), tiene pinta que la función drop: te esta alterando el estilo de la fila. Prueba a dejar tu código solo con el .sortable().

$("#tbodyproject").sortable(
    items: "> tr",
    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();
4
  • El código funciona, pero el estilo sigue sin ser el correcto. el 18 sep. 2017 a las 12:20
  • Cuando arrastras la fila, ¿Te aparece ya todo arreguntado en el objeto auxiliar mientras arrastras?
    – Hictus
    el 18 sep. 2017 a las 12:31
  • Supongo que con arreguntado te refieres a junto y sí, se junta todo en la izquierda. Puedes probar el codigo en el Jsfiddle de la pregunta. el 18 sep. 2017 a las 13:04
  • Actualizo la pregunta con nueva información. @Hictus el 18 sep. 2017 a las 13:13

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.