使用 jquery 在 ASP.NET MVC 中使列表可排序

Question

我正在尝试弄清楚如何实现 jquery 可排序..

我有一个页面，其中包含一堆按类别分组的属性，如下所示：

• A 类
  • 属性1
  • 属性2
  • 属性3
  • 属性4
• B 类
  • 属性5
  • 属性6
  • 属性7
  • 属性8
• C 类
  • 属性9
  • 属性10
  • 属性11
  • 属性12

最终的解决方案是能够对所有内容进行排序；对父级（类别）进行排序，对属性（子级）进行排序，并使用拖放操作在类别之间移动属性！.... 但我猜现在它正在拉伸它..

因此，能够使用拖放功能对每个类别下的属性进行排序将是一个不错的开始。 我一直在看 jquery sortable 似乎可以做到这一点，但我该如何实现呢？ 我猜每个类别都需要一个脚本...

类似这样的：http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

ASP.NET 4、EF 4、ASP.NET MVC 3、Razor 视图...

这是我必须处理的：

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

有什么想法吗？ 非常感谢任何帮助！

Answer 1

您不需要遍历它们，但是为ul 元素使用一个类将有助于区分它们。使用containment parent 将它们的移动限制到父元素可能会使意图更清晰，但除非您指定connectWith 选项，否则它们应该保留在各自的列表中。请参阅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>

注意：这不解决保留所选排序顺序的问题。为此，您需要在所述问题范围之外的其他代码。除非排序功能只是为了帮助用户识别此页面上的元素，否则我认为您会发现记录顺序非常重要。

Answer 2

不要自吹自擂，但我认为我写的一个插件正好适合你想要做的事情。它允许您根据 HTML 数据属性对列表进行排序，因此您可能需要稍微调整您的标记，但总的来说，我认为这是您正在寻找的。​​p>

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