ASP.NET MVC 中表格行的拖放重新排序实现问题

Question

我有一个ASP.NET MVC 4 Web应用程序。在一个网页上，我有一个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>

- Ciaran Gallagher

---

你应该发布你尝试过的内容及其结果，否则这个问题不会持续太久。 - BNL

http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/ - BNL

为什么每个tr周围都有一个tbody？应该只有一个tbody（如果有的话）。 - BNL

你应该在问题中保留有错误的代码。删除它会使解决方案失去任何上下文。 - BNL

在第四版中还是一个相当不错的问题，但现在变成了一团糟。请尝试使用jsfiddle重新创建您的问题并发布最简单的示例。我建议将此问题回滚到第4版，其中解决了您的原始问题，并为您想出的任何内容打开一个新问题。 - BNL

Answer 1

重复的 tbody 标签是问题所在。

正常工作：

http://jsfiddle.net/vR9UW/

不起作用：

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

- BNL