js 拖拽

1.js

 <script src="~/Content/js/jquery-ui.min.js"></script>
    <script src="~/Content/js/tableHeadFixer.js"></script>
    <script>
        //layer.tips('@lblDrag', '.tips');
        $(".filter_table tbody").sortable({
            placeholder: "ui-state-highlight",
            update: function () {
                //var i = 1;
                $(".filter_table tbody tr").each(function (i, n) {
                    $(this).find("td").eq(4).html(PrefixInteger(++i, 3));//将数字格式话为三位，如2 -> 002
                });
            }
        });
        $(".filter_table tbody").disableSelection();
        function PrefixInteger(num, length) {
            return (Array(length).join('0') + num).slice(-length);
        }
    </script>

2.使用

 <table class="filter_table mt fixTable">
                        <thead>
                            <tr>
                                <th>@lblLotId</th>
                                <th>@lblSubstrateId</th>
                                <th>@lblFrameId</th>
                                <th>@lblCstId</th>
                                <th>@lblSlotId</th>
                                <th>@lblStepId</th>
                                <th>@lblStepName</th>
                                <th>@lblLotStatus</th>
                                <th>@lblWorkOrderId</th>
                                <th>@lblWorkOrderType</th>
                                <th>@lblProdId</th>
                                <th>@lblProdName</th>
                                <th>@lblProdVer</th>
                                <th>@lblRouteId</th>
                                <th>@lblRouteName</th>
                                <th>@lblRouteVer</th>
                                <th>@lblCustomerId</th>
                                <th>@lblOperatorCode</th>
                                <th>@lblOperatorName</th>
                                <th class="time_w">@lblOperateTime</th>
                            </tr>
                        </thead>
                        <tbody id="tb_lot">
                            @{
                                foreach (var item in Model)
                                {
                                    var cst = csts.Where(x => x.cstSeq == item.cstSeq).FirstOrDefault();
                                    <tr data-cstseq="@item.cstSeq" data-lotseq="@item.lotSeq" data-substrateid="@item.substrateId" data-frameid="@item.frameId">
                                        <td>@item.lotId</td>
                                        <td>@item.substrateId</td>
                                        <td>@item.frameId</td>
                                        <td>@cst.cstId</td>
                                        <td>@item.cstSlot</td>
                                        @*<td><input type="text" name="cstSlot" value="@item.cstSlot"></td>*@
                                        <td>@item.stepId</td>
                                        <td>@item.stepName</td>
                                        <td>@item.lotStatus</td>
                                        <td>@item.workOrderId</td>
                                        <td>@item.workOrderType</td>
                                        <td>@item.prodId</td>
                                        <td>@item.prodName</td>
                                        <td>@(item.prodVer )</td>
                                        <td>@item.routeId</td>
                                        <td>@item.routeName</td>
                                        <td>@(item.routeVer )</td>
                                        <td>@item.customerId</td>
                                        <td>@item.trxUserId</td>
                                        <td>@item.trxUserName</td>
                                        <td>@item.trxTime</td>
                                        @*<td>@((item.trxTime==null||item.trxTime==DateTime.MinValue)?"":item.trxTime.ToString(ConfigurationKey.GetDateFormat))</td>*@
                                    </tr>
                                }
                            }
                        </tbody>
                    </table>