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/

Answer 2

在Kendo UI控件中无法执行此操作。 Telerik表示他们没有计划这样做，并且有很多借口为什么他们不打算这样做。

然而，使用一些JavaScript，有一种解决方法。如果您将两个列表都排序，则可以过滤“可拖动”列表。项目，所以他们不改变立场。

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

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

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

KendoUI连接可拖动到可排序

2 个答案: