jquery-ui - KendoUI 像 JQueryUI 一样可排序

Question

寻找使用 KendoUI 的示例，例如 JQueryUI 可排序方法。似乎找不到这样的东西。如果你不能在 KendoUI 中做到这一点，那真是太遗憾了。

http://jqueryui.com/demos/sortable/

Answer 1

如果您想拥有与其他 KendoUI 小部件相同的外观和感觉，您可以尝试使用 TreeView 来实现它:

如果这是可排序的元素:

var dataSource = [
    { id:1, text:"Element 1" },
    { id:2, text:"Element 2" },
    { id:3, text:"Element 3" },
    { id:4, text:"Element 4" },
    { id:5, text:"Element 5" },
    { id:6, text:"Element 6" }
];

那么你可以使用以下代码:

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

呈现一个可排序的列表。

笔记:
ob-item是每个可排序项目所需的样式。例如:

.ob-item {
    background-color: #e9e9e9;
    border: 1px solid #a99f9a;
    color: #2e2e2e;
    padding: 5px;
    border-radius: 4px;
}

如果你允许嵌套，那么你应该替换 insertBefore来自 append .