1
I have a page that user have the freedom to sort table, and this drag and drop event on computer works perfectly, but on tablets, mobiles does not work, what to do 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 on this line the script picks up 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 code Javscript/Ajax 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>
According to this thread on Github https://github.com/metafizzy/packery/issues/336 jquery ui does not support touch screen. You can use this solution here. http://touchpunch.furf.com/
– Netinho Santos
@Netinhosantos o http://touchpunch.furf.com/ does not work with tables.
– Cyberlacs