KendoUI连接可拖放到可排序

有没有什么办法可以将KendoUI可拖动项添加到KendoUI可排序列表中作为jQueryUI的例子：http://jqueryui.com/draggable/#sortable。我用这个头脑打了一天，变得有趣。我应该切换到jQueryUI吗？KendoUI连接可拖放到可排序

来源

2014-04-15 Emil Dimitrov

我已经在Kendo UI Feedback网站上申请了此功能，如果有足够的人投票支持，他们可能会添加以下功能：http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-意见/建议/ 6938646-drag-items-from-a-draggable-to-a-sortable – Alejo

你有没有得到过这个解决方案？ –

你检查了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/

来源

2014-04-15 17:53:44 OnaBai

你碰巧知道该组件需要哪个版本的Kendo UI？ –

是的，最新v2014.1.318 – OnaBai

感谢您的示例OnaBai，但我已经使用kendo sortable.My关心的是如何将元素从elswhere拖入kendo sortable ..查看我在jqueryUI中提供的示例有选项draggable connectToSortable ..在Kendo中没有这样的事情，所以我的问题是如何做从页面的JqueryUI示例中执行相同的操作（将可拖动的项目，并将其副本放入可排序的集合中）pS Kendo版本是最新的..已下载2天前 –

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

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

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

这拨弄表明这一点：http://jsfiddle.net/kgjertsen/r4xmLevq/

唯一的缺点是“拖动”项消失，直到你把它的可排序区域。

来源

2015-11-04 17:09:48

KendoUI连接可拖放到可排序

回答

相关问题