asp.net-mvc - 使用 ASP.NET MVC 实现问题对表行进行拖放重新排序

Question

我有一个 ASP.NET MVC 4 网络应用程序。在网页上，我有一个 HTML 表格，其中显示了一些项目。

我希望能够对保存回数据模型的项目表进行拖放重新排序。

我查看并尝试了几种不同的方法来执行此操作，使用 JQuery UI 和其他一些插件，但我未能成功实现该功能。

我看过this例如，但我的表在按如下方式实现后在运行时没有改变:

        <script type="text/javascript">
        $(document).ready(function()
        {
            $('#clueTable tbody').sortable().disableSelection();
        });
    </script>

我有所有必要的 javascript:

<script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.10.2.min.js"></script>

我不会发布整个表格，但它看起来像这样:

        <table id="clueTable" class="grid">
        <thead>
            <tr>
                <th>Clue #</th>
                <th>Location</th>
                <th>Quiz Clue?</th>
                <th>Actions</th>
            </tr>
        </thead>

        @for (int i = 0; i < Model.Clues.Count; i++)
        {
            <tbody>
                <tr>
                    <td>Number</td>
                    <td>Things</td>
                    <td>Yes</td>
                    <td>Stuff</td>
                </tr>
            </tbody>
        }
    </table>

Answer 1

重复的 tbody 标签是你的问题。

作品:

http://jsfiddle.net/vR9UW/

不起作用:

http://jsfiddle.net/vR9UW/1/