Maintain style by making a row drag

Question

Maintain style by making a row drag

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a table with a style, and when doing a drag of a row the style is changed.

I have looked with the inspecting element, but I am not able to come up with the solution.

This is how the table looks without clicking:

And that's how it looks when doing a drag of a row (while keeping the row selected, until I do the drop)

The view looks like this:

<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>

The jquery is this:

$("#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();

How could I do to maintain the style of which I am doing a drag 'n' drop? To distinguish it a little, I would like to add a background perhaps a little darker, but I do not want it to move so much to the left and look so small.

JSFiddle reproducing the problem: link

jquery html css bootstrap

asked by Lluís Puig Ferrer 18.09.2017 в 12:41

source

2 answers

0

If all you want to order, should not make you miss the .droppable() , it looks that you function% drop: is altering the style of the line. Try leaving your code only with .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();

answered by 18.09.2017 в 14:17

Do you want the link to cover 100% of the container? How to save an image in Database by URL

score 1 · Accepted Answer

Your problem is the <form> tag, which should not be there: a <tr> only supports content <td> or <th> .

So the code:

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

You should change it to:

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

     ...
  </form>
</td>

And it will stop splitting your line in two.

Now there is the issue of the width of each cell: in a table, all the cells have a width (by default) that is imposed by the cell that needs more width. In this case, the width of the "Name" column is given precisely by the header (th). When you are moving the row, you are "pulling" it out of the table, it is as if it were in a different table and then the cells automatically take the width you need. You can solve it by giving each column a fixed width (a percentage, for example) since the total width of the row does remain stable.