3

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

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

Kendolistview和Kendo Drag

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

树视图演示

PS：非常欢迎演示或类似的东西。

4

2 回答 2

5

如果您不仅需要充当 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/

于 2013-10-25T18:11:30.943 回答
1

我认为这可能有效：

$("#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);
    }
});

这里还有一些信息

于 2013-10-25T12:44:54.497 回答