kendo-ui - KendoUI 连接可拖动到可排序

Question

有什么方法可以连接 KendoUI 可拖动项以添加到 KendoUI 可排序列表中，例如此处的 jQueryUI:http://jqueryui.com/draggable/#sortable .我为此头疼了一天，它变得中等有趣。我应该切换到 jQueryUI 吗？

Answer 1

你查了吗KendoUI Sortable widget .它实际上很容易使用。

如果这是您的 HTML 列表元素:

<ul id="sortable">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
</ul>

你只需要这样做:

$("#sortable").kendoSortable({
});

在这里查看: http://jsfiddle.net/OnaBai/gN3jV/

使用此默认初始化，您可以使拖动的元素看起来像原始元素(相同的 CSS 样式)，但您可以通过定义 hint 来更改它。处理程序:

$("#sortable").kendoSortable({
    hint:function(element) {
        return element.clone().addClass("ob-hint");
    }
});

我在拖动的元素中添加 CSS 类 ob-hint .

请参阅前面修改的示例: http://jsfiddle.net/OnaBai/gN3jV/1/

您还可以通过定义一个将类添加到元素甚至文本的处理程序来设置占位符(放置位置)的样式。

$("#sortable").kendoSortable({
    hint:function(element) {
        return element.clone().addClass("ob-hint");
    },
    placeholder:function(element) {
        return element.clone().addClass("ob-placeholder").text("drop it here");
    },
});

这里的修改示例: http://jsfiddle.net/OnaBai/gN3jV/2/