Making a list sortable in ASP.NET MVC using jquery

I'm trying to figure out how to implement jquery sortable..

I have a page with a bunch of attributes grouped by category, like this:

• CategoryA
  • Attribute1
  • Attribute2
  • Attribute3
  • Attribute4
• CategoryB
  • Attribute5
  • Attribute6
  • Attribute7
  • Attribute8
• CategoryC
  • Attribute9
  • Attribute10
  • Attribute11
  • Attribute12

The ultimate solution would be to be able to sort everything; sort parents (categories), sort attributes (children) and move attributes between categories with Drag-And-Drop!.... But I'm guessing that is stretching it right now..

So, just being able to sort the attributes under each category with Drag-And-Drop would be a nice start.. I've been looking at jquery sortable which seems to do this, but how do I implement it? I'm guessing I need one script for each category...

Something like this: http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

ASP.NET 4, EF 4, ASP.NET MVC 3, Razor views...

This is what I've got to work with:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>ArrangeAttributesViewModel</legend>
        @foreach (var _category in Model.AllAttributesForCheckBoxList.AttributeList)
        {
            <p>
            </p>
开发者_Go百科            <p>
            </p>
            <div id="@_category.CategoryName">
                @_category.CategoryName
                <ul>
                    @foreach (var item in _category.AttributesList)
                    {
                        <li id="@item.Priority.ToString()">
                            @Html.CheckBox(item.AttributeID.ToString(), item.Chosen)
                            @(" " + item.AttributeTitle)
                        </li>
                    }
                </ul>
            </div>
        }
        <p>
            @Html.ActionLink("Create New", "Create")
        </p>
        <p>
        </p>
        <p>
            <input type="submit" value="Save Changes" />
        </p>
    </fieldset>
}

Any ideas? Any help is much appreciated!

You don't need to iterate over them, but using a class for the ul elements would help to distinguish them. Using containment parent to constrain their movement to the parent element might make the intent clearer, but unless you specify the connectWith option they should stay within their respective lists. See a simple example at http://jsfiddle.net/R4afy/

    <div id="@_category.CategoryName">
        @_category.CategoryName
        <ul class="sortable-container">
            @foreach (var item in _category.AttributesList)
            {
                <li id="@("P" + item.Priority.ToString())">
                    @Html.CheckBox(item.AttributeID.ToString(), item.Chosen)
                    @(" " + item.AttributeTitle)
                </li>
            }
        </ul>
    </div>

<script type="text/javascript">
     $(function() {
          $('.sortable-container').sortable({
              containment: 'parent'
          });
     });
</script>

Note: This doesn't address persisting the sort order chosen. To do that you'd need additional code outside the scope of your stated problem. Unless the ability to sort is simply to help the user identify elements on this page, I think you'll find recording the order is pretty important.

Not to toot my own horn, but I think a plugin I wrote is just right for what you're trying to do. It lets you sort lists depending on HTML data attributes, so you might have to tweak your markup a bit, but in general I think it's what you're looking for.

https://github.com/jszpila/jquery.listSorter