Tabela com evento drag and drop não funciona em mobile
Tenho uma página que tem uma tabela, o usuário tem a opção de ordenar as linhas desta tabela com evento drag and drop.
O evento funciona perfeitamente no windows, Chrome, Internet Explorer, Firefox.
Quero que esta tabela funcione em dispositivo móvel para ser mais exato com Android pois vou usar internamente dentro da empresa onde trabalho e lá usa somente tablets e celulares com OS Android.
Em minha tabela inseri um id sortable
<tbody id="sortable" style="cursor:pointer">
e também nesta linha o script pega a linha com os valores
<td class="taskSingleInLine" id="task@(Model.LoteList.ElementAt(i).NumeroLote)" data-taskid="@(Model.Genero.ElementAt(i).GeneroId)-@(i+1)">
**Segue abaixo código Javscript/Ajax e o html**
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script>
$(document).ready(function () {
$("#sortable").sortable({
update: function (event, ui) {
var itemIds = "";
$("#sortable").find(".taskSingleInLine").each(function () {
var itemId = $(this).attr("data-taskid");
itemIds = itemIds + itemId + ",";
});
$.ajax({
url: '@Url.Action("UpdateItem", "Lotes")',
data: { itemIds: itemIds },
type: 'POST',
success: function (data) {
location.reload();
},
error: function (xhr, status, error) {
}
});
}
});
});
</script>
**Html - ASP.NET MVC**
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Lote.NumeroLote)
</th>
</tr>
</thead>
<tbody id="sortable" style="cursor:pointer">
@for (var i = 0; i < Model.LoteList.Count(); i++)
{
<tr>
<td class="taskSingleInLine" id="task@(Model.LoteList.ElementAt(i).NumeroLote)" data-taskid="@(Model.Genero.ElementAt(i).GeneroId)-@(i+1)">
@Html.DisplayFor(Model => Model.LoteList.ElementAt(i).NumeroLote)
</td>
</tr>
}
</tbody>
</table>
</div>Discussão (0)
Carregando comentários...