How to prevent an item to be sorted (fix positon) in 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
            }
        }
});

I want to prevent that the dragged item can be inserted after an itemA (instead, it could be inserted to the previous index) and also that itemA cannot be dragged.

So itemA has to stay fixed on its position.

Answer 1

I found the answer and here is a demo: https://demos.telerik.com/kendo-ui/sortable/filter-disable .

For my specific case: There is no need to modify e.newIndex.

With filter: "div.myclass.sortable", I allow that only divs with the class "sortable" are sortable. I give all div.myclass elements the class sortable (in my Kendo-listview-template).

For preventing a div to be sorted, I search it and remove the class sortable:

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

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

---

If you just want that you cannot move an item (but it does not have to stay fix when other items move), you have to use disable instead of filter (@see also in the demo above).