9

我有一些类似于此的 jQuery UI Portlet：

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

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

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

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

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

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

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

所以当用户点击一个按钮时，我想像这样添加一个项目 Text01 ：

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

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

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

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

<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 和内容可以不同。

关于如何从 jquery 函数执行此操作的任何想法？

我正在使用 jQuery 1.10.2

4

2 回答 2

17

这看起来很有希望：

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

我没有尝试过，但这似乎暗示您可以将一个项目添加到可排序的项目中，然后调用$('#mysortable').sortable('refresh')以识别它。

于 2014-04-09T13:31:26.700 回答
5

这行得通。从您的按钮单击调用 appendThing：

var counter = 1;
function appendThing() {
    $("<li id='Text" + counter + "' class='ui-state-default'>Text" + counter + "</li>").appendTo($("#mySortable"));
    $("#mySortable").sortable({ refresh: mySortable })
    counter++;   
};
于 2014-06-08T05:49:58.227 回答