doubts with sortable jquery

Question

I’m having doubts about using jQuery’s sortable.

1º I have to block so that the user never puts a tr on the th

2º Note that when dragging a place row the data is all stuck together, how to keep the columns separate?

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

Answer 1

Define the thead and tbody of your table, and define in CSS the class .ui-sortable-helper for 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>