doubts with sortable jquery

Question

doubts with sortable jquery

Navigation

#1 by (2 votes)

2

I'm wondering how to use the jQuery sortable.

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

2º Notice that when you drag a place line the data is all stuck together, how do you keep the columns separated?

$(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><scriptsrc="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>

javascript jquery jquery-ui

asked by anonymous 08.05.2017 / 18:10

1 answer

"margin: 0" does not completely reset When to use ADD or COPY to copy files to a Dockerfile?

score 2 · Accepted Answer

Set the thead and tbody of your table, and set in the CSS the class .ui-sortable-helper to 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><scriptsrc="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>