I have a page that user to have the freedom to sort table, and this drag and drop event on the computer works perfectly, but on tablets, mobiles does not work, what should be done for the perfect workings of this event on mobile devices?
In my table I inserted an id
<tbody id="sortable" style="cursor:pointer">
and also in this line the script takes the line with the values
<td class="taskSingleInLine" id="task@(Model.LoteList.ElementAt(i).NumeroLote)" data-taskid="@(Model.Genero.ElementAt(i).GeneroId)-@(i+1)">
Below is Javscript / Ajax code and 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>