I use sortable plugin to create a table where user can drag and drop the rows to change the order. The plugin works fine but the dragged row does not keep the proportions, for example: when you drag the row, the input inside Apodo and Edad is smaller.
I tried to use the helper, but it looks even worse. How could I keep the proportions?
helper: function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
});
return $helper;
}
$(function() {
$(".table #bodyAliniacion").sortable({
cursor: 'pointer',
placeholder: "placeholder",
forcePlaceholderSize: true,
axis: 'y',
dropOnEmpty: false,
/*helper: function(e, tr)
{
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
});
return $helper;
},*/
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
$(this).find("tr").each(function (index) {
let idFila = this.id;
//if (idFila !== undefined){
// $("#ordenJugador-"+this.id.split("-")[1]).val(index+1);
//}
});
}
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script
src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"
integrity="sha256-6XMVI0zB8cRzfZjqKcD01PBsAy3FlDASrlC8SxCpInY="
crossorigin="anonymous"></script>
<div class="row">
<div class="col-8">
<table class="table">
<thead>
<th></th>
<th>Dorsal</th>
<th>Nombre</th>
<th>Demarcación</th>
<th>Titular</th>
<th>Apodo</th>
<th>Edad</th>
</thead>
<tbody id="bodyAliniacion">
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 1
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 2
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 3
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 4
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 5
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>