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連接可拖放到可排序

回答

相關問題