在MVC 5中的HTML表中拖放行

Question

我有一个HTML表。我需要具有能够拖放的行，并且一旦一行被拖放，它就应该在模型中具有更新的排序顺序编号数据。下面是我需要此表的地方。可以请人帮我吗？我尝试查找示例，但这不是我所需要的。

@model DetailsModel
@{
}
<div class="d-flex flex-row">
    <div class="p-2">
        @Html.ActionLink("Add New Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId }, new { @class = "btn btn-sm btn-primary"})
    </div>
</div>
<br />
<table class="table table-bordered table-condensed tablesorter" cellpadding="0" cellspacing="5">
    <tr>
        <th>Step ID</th>
        <th>Version ID</th>
        <th>Step Name</th>
        <th colspan="3">Actions</th>
    </tr>
    @foreach (var stepItem in Model.SectionTemplate.StepTemplateList)
    {
    if (stepItem.IsReadOnly)
    {
    <tr class="header">
        <th>@stepItem.StepId</th>
        <th>@stepItem.VersionId</th>
        <th>@Html.Label(stepItem.StepName, new { title = stepItem.StepText })</th>
        <th>
            @Html.ActionLink("Add New Version", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = stepItem.StepTemplateId, moduleTemplateId = Model.SectionTemplate.ModuleTemplateId, examTemplateId = Model.ExamTemplateId, createNewVerion = true }, new { @class = "btn btn-sm btn-primary" })
        </th>
        <th></th>
        <th> @Html.ActionLink("Remove Step", "", "StepTemplate", new { @class = "btn btn-sm btn-primary", @onclick = "javascript:return false;" })</th>
    </tr>
    }
    else
    {
    var indent = 0;
    foreach (var childStep in stepItem.ChildSteps)
    {
    if (childStep.ParentStepTemplateId == childStep.StepTemplateId && childStep.StepTemplateId == childStep.RootStepTemplateId)
    {
    <tr class="header">
        <th data-indent=@indent>@stepItem.StepId</th>
        <th data-indent=@indent>@stepItem.VersionId</th>
        <th data-indent=@indent>@Html.Label("",stepItem.StepName, new { title = stepItem.StepText })</th>
        <th data-indent=@indent>
            @Html.ActionLink("Edit", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = stepItem.StepTemplateId, moduleTemplateId = Model.SectionTemplate.ModuleTemplateId, examTemplateId = Model.ExamTemplateId }, new { @class = "btn btn-sm btn-primary" })
        </th>
        <td>
            <div class="d-flex flex-column">
                <div class="p-2">
                    @Html.ActionLink("+ New Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId,}, new { @class = "btn btn-sm btn-secondary", @title = "This action will add a new step after this step." })
                </div>
                <div class="p-2">
                    @Html.ActionLink("+ New Child Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId}, new { @class = "btn btn-sm btn-primary", @title = "This action will add a new child step to this step." })
                </div>

            </div>
        </td>
        <th data-indent=@indent>@Html.ActionLink("Remove Step", "", "StepTemplate", new { @class = "btn btn-sm btn-primary", @onclick = "javascript:return false;" })</th>
    </tr>
    indent = indent + 1;
    }
    else if (childStep.ParentStepTemplateId == childStep.RootStepTemplateId && childStep.StepTemplateId != childStep.RootStepTemplateId)
    {
    <tr class="child">
        <td data-indent=@indent>.@childStep.StepId</td>
        <td data-indent=@indent>@childStep.VersionId</td>
        <td data-indent=@indent>@Html.Label("",childStep.StepName.ToString(), new { title = childStep.StepText })</td>
        <td data-indent=@indent>
            @Html.ActionLink("Edit", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId, moduleTemplateId = Model.SectionTemplate.ModuleTemplateId, examTemplateId = Model.ExamTemplateId }, new { @class = "btn btn-sm btn-primary" })
        </td>
        <td>
            @Html.ActionLink("+ New Child Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId}, new { @class = "btn btn-sm btn-primary", @title = "This action will add a new child step to this step."})
        </td>
        <td data-indent=@indent> @Html.ActionLink("Remove Step", "", "StepTemplate", new { @class = "btn btn-sm btn-primary", @onclick = "javascript:return false;" })</td>
    </tr>
        var childstepsforchild = stepItem.ChildSteps.Where(m => m.ParentStepTemplateId == childStep.StepTemplateId);
        foreach (var m in childstepsforchild)
        {
            m.childIndent = indent + 1;
        }
    }
    else if (childStep.ParentStepTemplateId != childStep.RootStepTemplateId)
    {
        var dots = "";
        for (int i = 0; i < @childStep.childIndent; i++)
        {
            dots = dots + ".";
        }
    <tr class="child">
        <td data-indent=@childStep.childIndent>@dots@childStep.StepId</td>
        <td data-indent=@childStep.childIndent>@childStep.VersionId</td>
        <td data-indent=@childStep.childIndent>@Html.Label("",childStep.StepName, new { title = childStep.StepText })</td>
        <td data-indent=@indent>
            @Html.ActionLink("Edit", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId, moduleTemplateId = Model.SectionTemplate.ModuleTemplateId, examTemplateId = Model.ExamTemplateId }, new { @class = "btn btn-sm btn-primary" })
        </td>
        <td>
            @Html.ActionLink("+ New Child Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId}, new { @class = "btn btn-sm btn-primary" , @title = "This action will add a new child step to this step." })
        </td>
        <td data-indent=@childStep.childIndent> @Html.ActionLink("Remove Step", "", "StepTemplate", new { @class = "btn btn-sm btn-primary", @onclick = "javascript:return false;" })</td>
    </tr>
        var childstepsforchild = stepItem.ChildSteps.Where(m => m.ParentStepTemplateId == childStep.StepTemplateId);
        foreach (var m in childstepsforchild)
        {
            m.childIndent = childStep.childIndent + 1;
        }
    }
    }
    }
    }
</table>

<script type="text/javascript">
    $(document).ready(function () {

        //$('.child').hide();

        $('.header').click(function () {
            //var tr = $(this).parents('tr:first');
            //tr.find('.expand, .collapse').toggle(); 
            //$(this).toggleClass('expand').nextUntil('tr.header').toggle();
            $(this).nextUntil('tr.header').toggle();
        });

        $("td")
            .css("padding-left", function (index) {
                return 20 * parseInt($(this).data("indent")) + "px";
            });
    });
</script>

谢谢！

请有人在这里帮我吗？！我正在尝试下面的示例，并得到; 0x800a01b6-JavaScript运行时错误：对象不支持属性或方法“可排序”错误。

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

<table style="width: 50%" border="1" cellpadding="10" cellspacing="10">
    <thead>
        <tr><th>Defenders</th><th>MidFielders</th><th>Strikers</th></tr>

    </thead>
    <tbody id="liverpool">
        <tr>
            <td>Alan Hansen</td>
            <td>Graeme Souness</td>
            <td>Ian Rush</td>
        </tr>
        <tr>
            <td>Alan Kennedy</td>
            <td>Steven Gerrard</td>
            <td>Michael Owen</td>
        </tr>
        <tr>
            <td>Jamie Garragher</td>
            <td>Kenny Dalglish</td>
            <td>Robbie Fowler</td>
        </tr>
        <tr>
            <td>Rob Jones</td>
            <td>Xabi Alonso</td>
            <td>Dirk Kuyt</td>
        </tr>
    </tbody>
</table>


<script type="text/javascript">

    $(document).ready(function () {
        $("#liverpool").sortable();

    });

</script>