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

柳屋

我正在研究利用KendoUI jQuery库的可排序列表。我有一个基本列表,您可以重新排序,并且一旦列表项被移动,我想重新分配它们。例如,如果将ID为“ plot3”的列表项移动到列表的顶部,我想将该ID更改为“ plot1”,将原始“ plot1”更改为“ plot3”,依此类推。

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

<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轻松完成的事情吗?

阿德里亚尼6

您可以使用for循环更新ID 也就是说,如果DOM元素也重新排序(我认为是)。这样一来,您将始终拥有ID升序排列。

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

编辑:如@ezanker所说,将上面的代码放入kendoSortable。在这里见他的道场

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章