Adding items dynamically/programmatically to jQuery-ui sortable

Question

I have some jQuery UI Portlets similar to this:

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

and what I want is to add dynamically (when user click on a button on the UI) some boxes like this (display as grid) within each portlet:

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

I want to add them to portlet from top to bottom and from left to right, defining the maximum number of "boxes" (items) per row.

Is it possible to do (dynamically add them to each portlet)? if so, how? some ideas?

for example, let's say I have below jquery-ui sortable block in my asp.net mvc4 view (initially empty):

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

so when user click on a button, I want to add an item Text01 like this:

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

so after adding it, below sortable block is:

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

if user click on a button again, I want to add another item to the sortable block, so after adding it, below sortable block is generated:

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

and so on...

Note that in this example ids and contents are correlative, Text01, Text02... but this is only an example, ids and contents can be different.

Any ideas on how to do this from a jquery function?

I am using jQuery 1.10.2

Answer 1

This looks promising:

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

I haven't tried it, but it seems to imply that you can just add an item to a sortable, then call $('#mysortable').sortable('refresh') to recognize it.

Answer 2

This works. Call appendThing from your button click:

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