Adding items dynamically/programmatically to jQuery-ui sortable

Question

I have some jQuery UI Portlets similar to this:

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

Uri Agassi · Accepted Answer · 2014-04-09 13:59:26Z

18

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.

edited Apr 9, 2014 at 13:59

Uri Agassi

37.5k16 gold badges82 silver badges96 bronze badges

answered Apr 9, 2014 at 13:31

Phéna Proxima

1811 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jan Doggen Over a year ago

Since you have not tried this and you're not sure it helps, this is more of a comment than an answer.

EdwardF · Accepted Answer · 2014-06-08 05:49:58Z

5

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++;   
};

answered Jun 8, 2014 at 5:49

EdwardF

851 silver badge7 bronze badges

Collectives™ on Stack Overflow

Adding items dynamically/programmatically to jQuery-ui sortable

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related