Question

I’m using jquery sortable function, but i’m having some problems.

My header ‘Name’ ‘Date from’ ‘Date To’ ‘Priority’ is movable, which it shouldn’t be. I can’t drop it anywhere else in the table which also shouldn’t be possible, so that’s fine.

Code for first table:

HTML:

<table id="sort" class="table table-striped table-bordered table-condensed">
    <tbody>
        <tr>
            <th class="cellWidth40"> Name</th>
            <th class="cellWidth20"> Date from </th>
            <th class="cellWidth20"> Date to </th>
            <th class="cellWidth15"> Priority</th>
            <th></th>
        </tr>
    </tbody>
    @foreach (var item2 in Model.ContinuousRouteModels.Where(p => p.Active).OrderBy(p => p.Priority))
    {
        <tr class="priorityRow">
            <td id="tableDragSort">
                @Html.HiddenFor(modelItem => item2.Id, new { @class = "routeIdentifier" })
                @Html.DisplayFor(modelItem => item2.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item2.ValidFrom)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item2.ValidTo)
            </td>
            <td class="routePriority">
                <span>@Html.DisplayTextFor(modelItem => item2.Priority)</span>
            </td>
            <td class="cellWidth5">
                <a href="@Url.Action("Copy", "Route", new { id = item2.Id })"><i class="icon-file" alt="Kopiere rute" ></i></a>
                <a href="@Url.Action("Edit", "Route", new { id = item2.Id })"><i class="icon-edit" alt="Redigere rute"></i></a>
                <a class="deleteLink" href="@Url.Action("DeleteRoute", "Route", new { id = item2.Id })"><i class="icon-trash" alt="Slette rute"></i></a>
            </td>
        </tr>
    }
</table>

JQUERY:

$("#sort tbody").css("cursor", "n-resize");
$("#sort tbody").sortable({
    helper: fixHelper,
    opacity: 0.5,
    update: function(event, ui) {
        updatePriorityTable();
    }
}).disableSelection();

Second table:

“Your routepattern Id Delay”

My other table which should be pretty much the same have a different behavior. The header in this table can be moved, and dropped inside the table. Neither should be possible

Does anyone have any clue whats wrong?

Code for second table:

HTML:

<table id="RoutePatternBusStops" class="table table-striped table-bordered table-condensed" style="width:270px">
                <tbody>
                    <tr>
                        <th style="text-align: left">Your routepattern</th>
                        <th>Id</th>
                        <th>Delay</th>
                    </tr>
                </tbody>
                @foreach (var item2 in Model.RoutePatternBusStops.OrderBy(p => p.Delay))
                {
                    <tr>
                        <td>
                            <input name="RoutePatternBusStops.BusStopId" type="hidden" value="@item2.BusStop.Id">@item2.BusStop.Name
                        </td>
                        <td>
                            @item2.BusStop.Id
                        </td> 
                        <td>
                            <input type="text" style="width: 20px" name="RoutePatternBusStops.Delay" value="@item2.Delay">
                        </td>
                    </tr>
                }

            </table>

JQUERY:

$("#RoutePatternBusStops tbody").css("cursor", "n-resize");
    $("#RoutePatternBusStops tbody").sortable({
        helper: fixHelper,
        opacity: 0.5,
        update: function(event, ui) {

        }
    }).disableSelection();

Answer 1

Put the headers inside a <thead></thead> insteed of <tbody></tbody>