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

【问题标题】：Drag and Drop Reorder in KendoUI list view在 Kendo UI 列表视图中拖放重新排序
【发布时间】：2013-11-04 10:15:07
【问题描述】：

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

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

Kendolistview 和 Kendo Drag

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

TreeView Demo

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

【问题讨论】：

标签： listview drag-and-drop kendo-ui

【解决方案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/

【讨论】：

这太棒了，又小又干净。正是我要求的。
可能，但我们需要解决如何在拖动项目时从一页移动到另一页。你打算怎么做？通常是按页码，但这次不太可能。

【解决方案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

【讨论】：

这适用于 TREEVIEW，我正在寻找 LISTVIEW 解决方案 :)