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

【问题标题】：How to prevent an item to be sorted (fix positon) in Kendo Sortable / Integration - ListView?如何防止在 Kendo Sortable / Integration - ListView 中对项目进行排序（固定位置）？
【发布时间】：2018-11-08 16:13:54
【问题描述】：

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 必须固定在它的位置上。

【问题讨论】：

标签： javascript events kendo-listview kendo-sortable

【解决方案1】：

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

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

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

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

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

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

如果你只是想让你不能移动一个项目（但是当其他项目移动时它不必保持固定），你必须使用 disable 而不是过滤器（@see also in the demo以上）。

【讨论】：