javascript - 如何防止在 Kendo Sortable / Integration - ListView 中对项目进行排序（固定位置）？

Question

var dataSource = new kendo.data.DataSource({
        data: anArray
    })

var listView = $("#listView").kendoListView({
    name: "listView",
    tagname: "div",
    dataSource: dataSource,
    template: kendo.template($("#listview-template").html()),
});

listView.kendoSortable({
        filter: ">div.myclass",
        cursor: "move",
        placeholder: function (element) {
            return element.clone().addClass("placeholder").text("position here")
        },
        hint: function (element) {
            return element.clone().removeClass("k-state-selected");
        },
        change or move or end?: function(e){
            if(e.newIndex==35){
                 --e.newIndex;
                 console.log(e.newIndex); //output is 34, but the element is moved to 35
            }
        }
});

我想防止拖动的项目可以插入到 itemA 之后（相反，它可以插入到上一个索引中）并且 itemA 不能被拖动。

所以 itemA 必须固定在它的位置上。

Answer 1

我找到了答案，这里有一个演示：https ://demos.telerik.com/kendo-ui/sortable/filter-disable 。

对于我的具体情况：无需修改 e.newIndex。

使用filter: "div.myclass.sortable"，我允许只有具有“可排序”类的 div 是可排序的。我为所有 div.myclass 元素提供了可排序的类（在我的 Kendo-listview-template 中）。

为了防止对 div 进行排序，我对其进行搜索并删除可排序的类：

var sortableItems = $(".sortable");
var nonSortableItem = sortableItems[35];               

nonSortableItem.classList.remove("sortable"); //now that one stays fix 

---

如果你只是希望你不能移动一个项目（但是当其他项目移动时它不必保持固定），你必须使用禁用而不是过滤器（@参见上面的演示）。