2

Estou com dúvidas de como utilizar o sortable do jQuery.

1º Tenho que bloquear para que o usuário nunca coloque uma tr sobre a th

2º Reparem que quando arrasta uma linha de lugar os dados ficam todos grudados, como manter a separação das colunas?

$(document).ready(function () {
        $('tbody').sortable();
    });
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
    background: #F7F7F7;
} 
.tab_dados tr:nth-child(even) {
    background: #FFFFFF;
}
.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<table class="tab_dados">
  <tr>
    <th style="width: 30px;"></th>
    <th>CÓDIGO</th>
    <th>NOME</th>
    <th>CIDADE</th>
    <th>ESTADO</th>
  </tr>
  <tr id='2'>
    <td>&nbsp;</td>
    <td>25</td>
    <td>HUGO</td>
    <td>BOA ESPERANÇA</td>
    <td>MG</td>
  </tr>
  <tr id='3'>
    <td>&nbsp;</td>
    <td>26</td>
    <td>bruno</td>
    <td>BOA ESPERANÇA</td>
    <td>MG</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>27</td>
    <td>rafael</td>
    <td>BOA ESPERANÇA</td>
    <td>MG</td>
  </tr>
</table>

1 Resposta 1

2

Defina o thead e tbody de sua tabela, e defina no CSS a classe .ui-sortable-helper para display:table:

.ui-sortable-helper {
    display: table;
}

$(document).ready(function () {
        $('tbody').sortable();
    });
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
    background: #F7F7F7;
} 
.tab_dados tr:nth-child(even) {
    background: #FFFFFF;
}
.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}
/*CLASSE PARA MANTER FORMATO AO ARRASTAR TR*/
.ui-sortable-helper {
    display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<table class="tab_dados">
  <thead>
  <tr>
    <th style="width: 30px;"></th>
    <th>CÓDIGO</th>
    <th>NOME</th>
    <th>CIDADE</th>
    <th>ESTADO</th>
  </tr>
  </thead>
  <tbody>
  <tr id='2'>
    <td>&nbsp;</td>
    <td>25</td>
    <td>HUGO</td>
    <td>BOA ESPERANÇA</td>
    <td>MG</td>
  </tr>
  <tr id='3'>
    <td>&nbsp;</td>
    <td>26</td>
    <td>bruno</td>
    <td>BOA ESPERANÇA</td>
    <td>MG</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>27</td>
    <td>rafael</td>
    <td>BOA ESPERANÇA</td>
    <td>MG</td>
  </tr>
</tbody>
</table>

2
  • 1
    Muito bom, funcionou 100%. Obrigado. Commented 8/05/2017 às 16:17
  • 1
    ok, estava aguardando o tempo para marcar ;) Commented 8/05/2017 às 16:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .