拖动一行时保持样式

Question

我有一个带有样式的表格，当我拖动一行样式更改时。

我检查了检查元素，但我找不到解决方案。

当我不点击时，表格如下所示：

当我点击时看起来像这样：

视图如下所示：

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

JQuery看起来像这样：

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

当我'拖'时，我怎么能保持这种风格？为了区分它，我想添加一个可能有点暗的背景。