Drag and drop reordering of table rows with ASP.NET MVC implementation issue

Question

I have an ASP.NET MVC 4 web application. On a web page, I have a HTML table presenting a number of items.

I want to be able to implement drag and drop re-ordering for the table of items, which is saved back to the data model.

I've looked at and tried a few different methods for doing this, using JQuery UI and some other plugins but I haven't successfully been able to implement the functionality.

I've looked at this example, but my table didn't change on running it after implementing it as follows:

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

I have all the necessary 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>

I'm not going to post the whole table, but it looks something like this:

        <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>

You should post what you have tried and its results. Otherwise this question won't last long. — BNL
– BNL, Commented Apr 23, 2013 at 18:17
Why do you have tbody around every tr? There should be only one tbody (if any). — BNL
– BNL, Commented Apr 23, 2013 at 18:40
You should leave the broken code in the question. Removing it removes any context for the solution. — BNL
– BNL, Commented Apr 23, 2013 at 18:52
What was a pretty good question in revision 4 is now a mess. Try to recreate your problem with jsfiddle and post the simplest example. I'd suggest rolling this question back to rev 4, where your original problem was solved and opening a new question for whatever you come up with. — BNL
– BNL, Commented Apr 23, 2013 at 18:56

BNL · Accepted Answer · 2013-04-23 18:44:59Z

4

The duplicated tbody tags are your problem.

Works:

http://jsfiddle.net/vR9UW/

Doesn't work:

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

answered Apr 23, 2013 at 18:44

BNL

7,1214 gold badges30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Drag and drop reordering of table rows with ASP.NET MVC implementation issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related