Question

我正在试图弄清楚如何实现jquery sortable ..

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

CategoryA
- ATTRIBUTE1
- Attribute2
- Attribute3
- Attribute4
类别b
- Attribute5
- Attribute6
- Attribute7
- Attribute8
CategoryC
- Attribute9
- Attribute10
- Attribute11
- Attribute12

最终的解决方案是能够对一切进行排序;使用拖放操作排序父类（类别），排序属性（子项）和在类别之间移动属性！.... 但我猜这就是现在伸展它..

因此，只需使用Drag-And-Drop对每个类别下的属性进行排序将是一个不错的开始.. 我一直在看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数据属性对列表进行排序，因此您可能需要稍微调整一下标记，但总的来说，我认为这是您正在寻找的内容。

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

使用jquery在ASP.NET MVC中对列表进行排序

2 个答案: