5

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

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

4

5 回答 5

4

如果您想拥有与其他 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.

于 2012-11-06T15:34:18.907 回答
3

是的，你可以在 KendoUi 中做到这一点。我同意，他们的文档可能会更清晰一些，但请在树视图拖放下查看：

http://demos.kendoui.c​​om/web/treeview/dragdrop.html

于 2012-10-05T11:03:54.467 回答
2

对于那些发现这个问题的人。现在 Kendo UI 有 Sortable 元素：http ://demos.telerik.com/kendo-ui/web/sortable/index.html

于 2014-04-16T12:10:38.570 回答
1

您可以使用自定义构建器构建自定义 jQuery UI js 文件：http: //jqueryui.com/download

只需获取包含您需要的 ui 核心和可排序功能的参考，文件大小将最小，您将获得所需的功能。

由于 Kendo UI 与 jQuery 一起工作，因此 jQuery UI 增加的重量是最小的。

于 2012-08-28T02:28:55.047 回答
1

像这样试试 

  var template = kendo.template("<ul id='sortable-basic'><li class='sortable'>Papercut <span>3:04</span></li><li class='sortable'>One Step Closer <span>2:35</span></li><li class='sortable'>With You <span>3:23</span></li><li class='sortable'>Points of Authority <span>3:20</span></li><li class='sortable'>Crawling <span>3:29</span></li><li class='sortable'>Runaway <span>3:03</span></li><li class='sortable'>By Myself <span>3:09</span></li></ul>");

$("#divSolution").html(template); //display the result
$("#sortable-basic").kendoSortable();
于 2016-03-21T12:54:00.673 回答