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/