javascript - Adding items dynamicallyprogrammatically to jQuery-ui sortable - Stack Overflow

admin管理员组

文章数量:1201815

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:

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 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

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

• javascript
• jquery
• jquery-ui
• portlet

Share Improve this question Follow edited Oct 1, 2013 at 19:45 user304602 asked Oct 1, 2013 at 16:44 user304602user304602 99144 gold badges2323 silver badges3939 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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.

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

本文标签： javascriptAdding items dynamicallyprogrammatically to jQueryui sortableStack Overflow