listview - 在 Kendo UI ListView 中拖放重新排序

Question

嘿，我是 KendoUI 的新手，我正在尝试通过拖放重新排序 listView。我注意到 listVIew 插件在其 CORE 中没有可拖动功能，因此我试图从 Kendo Framework 添加可拖动操作，但我什至没有关闭。

是否可以通过拖放对 listView 项目重新排序？

Kendolistview和 Kendo Drag

我注意到其中一个 KendoUI 插件确实具有此功能:

TreeView Demo

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 来识别每个元素，然后我们用它来插入它和从数据源中删除它。这会自动重绘它。

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