Css:拖放时保持风格

时间:2017-11-13 10:59:09

标签: javascript html css drag-and-drop

我有一个表格,当我进行拖动时,我会拖放问题所在的行,行的样式会发生变化。

在我拖动之前,表格如下所示: enter image description here

当我点击行并且我正在拖动时,看起来像这里。

enter image description here

我想也许是因为某些代码是错误的,有些<td><tr>可能没有关闭,我会检查但是我发布代码可能有人可以帮助我。

每个<td>的宽度都是%,所以我认为css不是问题。

<div class="col-md-12">
    <div id="tableemployees">       
      <table class="table">
        <thead>
          <tr class="tremployee">
            <th class="columnidemployee thcenter thmenuemp">ID</th>
            <th class="thcenter thmenuemp columnvisibleemp" >Visible</th>
            <th class="thmenuemp thmenuempname">Nombre</th>
            <th class="thmenuemp">#Hashtag</th>
            <th class="thmenuemp">Slug</th>
            <th class="thmenuemp">Puesto</th>
            <th class="thmenuemp thmenuimagen">Imagen</th>
            <th class="thcenter thmenuemp thmenuorden">Orden</th>
            <th class="thaccionesemployee thmenuemp"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
          </tr>
        </thead>
        <tbody id="tbodyemployee">
          @foreach ($employees as $key => $employee)
            <tr id="{{$employee->id}}">
              <td class="idemployees tdcenter"><p id="margindataemployee">{{$employee->id}}</p></td>
              <td class="visibleemployee tdcenter"> 
              <form action="{{route('admin.employees.cambiarVisible',$employee->id)}}" >
              <button type="button" id="buttonchangepublicemployee" data-id="{{ $employee->id }}" class="buttonchangepublicemployee">
                  @if ($employee->public == '1')
                            <i class="fa fa-check" aria-hidden="true" id="margindataemployee" class="cambiarsiporno"></i>
                   @else
                    <i class="fa fa-times" aria-hidden="true" id="margindataemployee"></i>
                   @endif
              </button>
              <input type="hidden" name="_token" value="{{Session::token()}}">
              </form>
              </td>
              <td class="nameemployee"><p id="margindataemployee">{{$employee->name}}</p></td>
              <td class="nameemployee2"><p id="margindataemployee">{{$employee->name}}</p><img src="{{ asset('/storage/employees/'.$employee->slug.'.jpg')}}" class="sizeimage"></td>
              <td class="hashtagemp"><p id="margindataemployee">#{{$employee->hashtag}}</p></td>
              <td class="hashtagemp2"><p id="margindataemployee" class="hashtagempp">#{{$employee->hashtag}}</p>  
              @if ($employee->public == '1')
                       <p class="pvisible">Visible:</p><i class="fa fa-check" aria-hidden="true" id="margindata"></i>
              @else
                       <p class="pvisible">Visible:</p><i class="fa fa-times" aria-hidden="true" id="margindata"></i>
              @endif
              </td>
              <td class="slugemployee"><p id="margindataemployee" class="slugemp">{{$employee->slug}}</p></td>
              <td class="slugemployee2"><p id="margindataemployee">{{$employee->slug}}</p>
               <form method="POST" action="{{route('admin.employees.destroy',$employee->id)}}" onsubmit="return ConfirmarBorrarTrabajadores()" class="formeditdeletemenuemployee4">
                            <input type="submit" value="Delete" class="btn btn-danger btn-danger-emp btn-sm" id="margindataemployee">
                            <input type="hidden" name="_token" value="{{Session::token()}}">
                            {{method_field('DELETE')}}
                          </form>
              </td>
              <td class="puestoemployee"><p id="margindataemployee">{{$employee->position}}</p></td>
              <td class="imagenemployee"><img src="{{ asset('/storage/employees/'.$employee->slug.'.jpg')}}" class="sizeimage"></td>
              <td class="ordenemployee tdcenter"><p id="margindataemployee">{{$employee->order}}</p>
              <div class="formeditdeletemenuemployee">
                <a href="{{ route('admin.employees.edit', $employee->id)}}" class="btn btn-success btn-success-emp btn-sm" id="margindataemployee">Editar</a>
                <button type="button" class="btn btn-danger btn-sm deletemenuemployee" data-toggle="modal" data-target="#formdeleteemployee_{{$employee->id}}" id="margindata">Borrar</button>
               </div>
              </td>
              <td class="formactionmenuemployee"> 
                <a href="{{ route('admin.employees.edit', $employee->id)}}" class="btn btn-success btn-success-emp btn-sm" id="margindataemployee">Editar</a>
                <button type="button" class="btn btn-danger btn-sm deletemenuemployee" data-toggle="modal" data-target="#formdeleteemployee_{{$employee->id}}" id="margindata">Borrar</button>
            </td>

              <div id="formdeleteemployee_{{$employee->id}}" class="modal fade" role="dialog"> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 START HERE-->
                          <div class="modal-dialog" style="background-color:#23517F;">
                          <div class="modal-content" style="background-color:#23517F;">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title" style="color:black;">¿Estas seguro de borrar el trabajador?</h4>
                          </div>
                          <div class="modal-body">
                            <div class="col-sm-6">
                                      <a href="{{ route('admin.employees') }}" class="btn btn-danger btn-block colsm6btnno">No</a>
                            </div>
                            <div class="col-sm-6">
                              <form method="POST" action="{{route('admin.employees.destroy',$employee->id)}}">
                                  <input type="submit" value="Si" class="btn btn-danger btn-block colsm6btnsi inputsiemployee">
                                  <input type="hidden" name="_token" value="{{Session::token()}}">
                                  {{method_field('DELETE')}}
                              </form>
                            </div>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
                          </div>
                        </div>
                        </div>
                        </div>
         </tr>
         @endforeach
       </tbody>
     </table>
     <br><br>
   </div>
</div>

0 个答案:

没有答案