Question

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

Answer 1

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.