在KendoUI列表视图中拖放重新排序

Question

Hy,我是KendoUI的新手,我试图通过拖放重新排序listView.我注意到listVIew插件在其CORE中没有可拖动的功能,所以我试图从Kendo Framework添加可拖动的操作,但我甚至不是很接近.

是否可以使用拖放重新排序listView项目？

Kendolistview和Kendo Drag

我注意到一个KendoUI插件确实有这个功能:

TreeView演示

PS:非常欢迎演示或类似的东西.

Answer 1

如果您需要它不仅可以作为ListView,而且可以作为实际的ListView:

var dataSource = new kendo.data.DataSource({
    data    : products,
    pageSize: 10
});

$("#listView").kendoListView({
    dataSource: dataSource,
    template  : kendo.template($("#template").html()),
    dataBound : function () {
        $(".product").kendoDraggable({
            hint: function (element) {
                return element.clone();
            }
        });
    }
});

$("#listView").kendoDropTargetArea({
    filter: ".product",
    drop  : function (e) {
        var srcUid = e.draggable.element.data("uid");
        var dstUid = e.dropTarget.data("uid");
        var srcItem = dataSource.getByUid(srcUid);
        var dstItem = dataSource.getByUid(dstUid);
        var dstIdx = dataSource.indexOf(dstItem);
        dataSource.remove(srcItem);
        dataSource.insert(dstIdx, srcItem);
        e.draggable.destroy();

    }
});

基本上我们用CSS类标识每个元素,.product然后我们用它来插入它并从DataSource中删除它.这会自动重绘它.

请参阅此处的运行示例:http://jsfiddle.net/OnaBai/MYbgy/1/