动态/编程地将项添加到jQuery-ui可排序

Question

我有一些与此类似的jQuery UI Portlet:

http://jqueryui.com/sortable/#portlets

我想要的是动态添加(当用户点击UI上的按钮时)每个portlet中的一些像这样的框(显示为网格):

http://jqueryui.com/sortable/#display-grid

我想从上到下,从左到右将它们添加到portlet,定义每行的"盒子"(项)的最大数量.

是否可以(将它们动态添加到每个portlet)？如果是这样,怎么样？一些想法？

例如,假设我在asp.net mvc4视图中有jquery-ui可排序块(最初为空):

<ul id="sortable">
</ul>

所以当用户点击一个按钮时,我想添加一个像这样的项目Text01:

<li id="Text01" class="ui-state-default">Text01</li>

所以在添加之后,以下可排序块是:

<ul id="sortable">
    <li id="Text01" class="ui-state-default">Text01</li>
</ul>

如果用户再次点击一个按钮,我想在可排序的块中添加另一个项目,所以在添加它之后,会生成以下可排序的块:

<ul id="sortable">
    <li id="Text01" class="ui-state-default">Text01</li>
    <li id="Text02" class="ui-state-default">Text02</li>
</ul>

等等...

请注意,在此示例中,ids和内容是相关的,Text01,Text02 ......但这只是一个示例,ids和内容可以不同.

关于如何从jquery函数执行此操作的任何想法？

我正在使用jQuery 1.10.2

Answer 1

这很有希望:

http://api.jqueryui.com/sortable/#method-refresh

我没有尝试过,但似乎暗示你可以只将一个项目添加到可排序的,然后调用$('#mysortable').sortable('refresh')以识别它.

Answer 2

这有效.从您点击按钮调用appendThing:

var counter = 1;
function appendThing() {
    $("<li id='Text" + counter + "' class='ui-state-default'>Text" + counter + "</li>").appendTo($("#mySortable"));
    $("#mySortable").sortable({ refresh: mySortable })
    counter++;   
};