动态/以编程方式将项目添加到jQuery-ui可排序 [英] Adding items dynamically/programmatically to jQuery-ui sortable

查看：54 发布时间：2021/5/24 19:04:32 javascript jquery jquery-ui portlet

本文介绍了动态/以编程方式将项目添加到jQuery-ui可排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

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

I have some jQuery UI Portlets similar to this:

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

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:

我想将它们从上到下，从左到右添加到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.

是否可以这样做(将它们动态添加到每个Portlet中)?如果是这样，怎么办?一些想法?

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

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

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

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

因此，当用户单击按钮时，我想添加一个文本Text01 ，如下所示:

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>

以此类推...

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

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

关于如何通过jquery函数执行此操作的任何想法?

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

我正在使用jQuery 1.10.2

I am using jQuery 1.10.2