Javascript 以动态/编程方式向jQuery ui排序表添加项

我有一些类似于以下内容的jQuery UI Portlet：

我想要的是在每个portlet中动态添加（当用户单击UI上的按钮时）如下所示的一些框（显示为网格）：

我想将它们从上到下、从左到右添加到portlet中，定义每行“框”（项）的最大数量

是否可以这样做（动态地将它们添加到每个portlet）？如果是，怎么做？一些想法

例如，假设我的asp.net mvc4视图中有以下jquery ui可排序块（最初为空）：

因此，当用户单击按钮时，我想添加一个项目Text01，如下所示：

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

Text01

所以添加后，下面的可排序块是：

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

Text01

如果用户再次单击某个按钮，我想将另一项添加到可排序块，因此添加后，将生成以下可排序块：

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

Text01
Text02

等等

请注意，在这个示例中，ID和内容是相关的，Text01、Text02。。。但这只是一个例子，ID和内容可以不同

关于如何从jquery函数实现这一点，有什么想法吗

我正在使用jQuery 1.10.2，这看起来很有希望：

---

我没有尝试过，但它似乎暗示您可以只向排序表中添加一个项目，然后调用

$（“#mysortable”）.sortable（'refresh'）

来识别它。

这很有效。从按钮中调用appendThing单击：

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

var计数器=1；
函数appendThing（）{
$（“
文本“+计数器+”
”）。附录（$（“#mySortable”）；
$（“#mySortable”）.sortable（{refresh:mySortable}）
计数器++；
};

因为您还没有尝试过这个方法，而且您也不确定它是否有用，所以这更多的是一个评论，而不是一个答案。

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