Only one column of the table responsible for Drag and Drop - Touch Punch

Question

Only one column of the table responsible for Drag and Drop - Touch Punch

Navigation

#1 by (0 votes)

0

How to make only one table column responsible for performing the drag and drop of the table row using the jQuery UI Touch Punch event

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.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) {

                    }
                });
            }
        });
        $("#sortable").disableSelection();

    });
</script>

HTML

<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="ui-state-default 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>

javascript ajax jquery-ui

asked by anonymous 04.07.2018 / 23:37

1 answer

Modal Form Login appears once and disappears at the same time Array has character limit?

score 0 · Accepted Answer

Solution to my own question. I had to search and understand and so I am contributing to the community, and incredible as it may seem after learning this command, in the forum itself stackoverflow but in English the friend jake-wolpert also passed the solution, thus credited to him the solution of the problem.

Documentation Link

$(document).ready(function() {

  $("#sortable").sortable({
    handle: ".drag-handler"
  });
  $("#sortable").disableSelection();

});

Demo