Question

我正在开发一个使用KendoUI jQuery库的可排序列表。我有一个基本列表，你可以重新排序，我想重新分配列表项的ID，一旦它们被移动。例如，如果将ID为“plot3”的列表项移动到列表顶部，我想将该id更改为“plot1”，将原始“plot1”更改为“plot3”，依此类推。 / p>

这是我到目前为止所拥有的。

<ul id="plot__points">
    <li class="sortable" id="plot1">Location #1</li>
    <li class="sortable" id="plot2">Location #2</li>
    <li class="sortable" id="plot3">Location #3</li>
</ul>

以下是控制可排序列表基本功能的脚本。这是开箱即用的kendoUI代码。

<script>
    $(function() {
        $("#plot__points").kendoSortable({
            hint:function(element) {
                return element.clone().addClass("hint"); 
             }, placeholder:function(element) {
                 return element.clone().addClass("placeholder").text("drop here");
                  }, cursorOffset: {
                      top: -10,
                      left: -230
      }});
    })
</script>

这是否可以使用jQuery轻松完成？

Answer 1

您可以使用for循环更新ID。也就是说，如果DOM元素也被重新排序（我认为是这样）。这样你就可以按升序排列你的ID。

$("#plot__points > li").each(function(index, item){
    $(this).attr("id", "plot" + (index + 1));
})

编辑：正如@ezanker所说，将上面的代码放入kendoSortable。见他的Dojo here。

Answer 2

以下是基于@Adriani6和@ezanker

给出的示例的最终代码

@(Html.Kendo().Sortable()
    .For("#plot__points")
    .Cursor("url('" + Url.Content("~/content/web/sortable/grabbing.cur") + "'), default")
    .CursorOffset(offset => offset.Left(-230).Top(-10))
    .HintHandler("hint")
    .Disabled(".disabled")
    .Events(e => e.Change("onChange"))
    .PlaceholderHandler("placeholder")
)

<script>
    function onChange(e) {
        $("#plot__points > li").each(function (index, item) {
            $(this).prop("id", "plot" + (index + 1));
        });
    }
</script>

如何使用KendoUI和jQuery在可排序列表上重新分配元素ID？

2 个答案: