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

Question

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

Answer 1

你检查过 KendoUI 可排序小部件吗？它实际上很容易使用。

如果这是您的 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/

Answer 2

在 Kendo UI 控件中没有办法做到这一点。Telerik 说他们没有这样做的计划，并且有很多不打算这样做的借口。

但是，使用一些 JavaScript，有一种方法可以绕过它。如果您使两个列表都可排序，则可以过滤“可拖动”项目，这样它们就不会改变位置。

$("#draggable").kendoSortable({
   connectWith: "#sortable",    
   start: function () {
     $("#draggable div").each(function () {
       $(this).removeClass("sortable");
     });
   }
});

这个小提琴显示了这一点：http: //jsfiddle.net/kgjertsen/r4xmLevq/

唯一的缺点是“可拖动”项目会消失，直到您将其放在可排序区域上。