javascript - 如何防止在 Kendo Sortable / Integration - ListView 中对项目进行排序(固定位置)?
问题描述
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 必须固定在它的位置上。
解决方案
我找到了答案,这里有一个演示: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
如果你只是希望你不能移动一个项目(但是当其他项目移动时它不必保持固定),你必须使用禁用而不是过滤器(@参见上面的演示)。
推荐阅读
- angular - 如何设计有棱角的材料?
- javascript - 在 Javascript 中检索 Firebase 子值
- python-3.x - Pytorch 无法转换 numpy.object 类型的 np.ndarray
- jquery - 选中复选框时的Jquery找不到最接近的输入值
- c - autoconf:在 `configure.ac` 中包含 `libftdi` 的最佳实践
- r - 在其他列上添加列条件
- python - 如何在 Python / Jupyter 中从 DataFrame 中分离一列?
- java - 如果唯一的区别是 for 循环中的方法调用,请避免重复代码
- python - 如何将列中的字符串转换为数据框中的不同列?
- c++ - 编译器会优化 for 循环以匹配总线宽度吗?