Question

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

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

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

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/

Answer 2

我认为这可能有用：

$("#sortable").kendoTreeView({
    dataSource :dataSource,
    template   :"<div class='ob-item'> #= item.text # </div>",
    dragAndDrop:true,
    drag       :function (e) {
        var dst = $($(e.dropTarget).closest(".k-item")[0]).data("uid");
        var src = $(e.sourceNode).data("uid");
        if ($(e.dropTarget).hasClass("ob-item") && dst != src) {
            e.setStatusClass("k-insert-top");
        } else {
            e.setStatusClass("k-denied");
        }
    },
    drop       :function (e) {
        if ($(e.sourceNode).data("uid") !== $(e.destinationNode).data("uid")) {
            $(e.sourceNode).insertBefore(e.destinationNode);
        }
        e.setValid(false);
    }
});

还有一些信息here

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

2 个答案: