jQuery UI可排序(ajax加载)

Question

我试图获得jQuery UI的可排序，作为Portlet的工作。数据通过jQuery的ajax方法获取，并传递到函数displayAllStrenghts(allStrengths)中，其中适当的div被放置在数据周围以显示。由于某种原因，当我切换到ajax填充列表时，排序功能丢失了。也许有人能指出我的错误?

我的HTML只包含一个div(嵌套在一个HTML表中的另一个表中):

        <tr>
           <td class="DGBody">
              <table class="Data">
                 <tr>
                    <td>
                       <div class="empStrengths"></div>
                    </td>
                 </tr>
                 <tr>
                    <td>
                       <div class="allStrengths"></div>
                    </td>
                 </tr>                     
              </table>
           </td>
        </tr>

注意:这里我只关注<div class="allStrengths"></div>。

这是JavaScript

 displayAllStrengths: function (allStrengths) {
    var self = this;
    var idx, strength, description;
    for (idx = 0; idx < 34; idx++) {
       strength = allStrengths[idx].Key;
       description = allStrengths[idx].Value;
       $("div.allStrengths").append('<div class="portlet"><div class="head">' + strength +
          '</div><div class="tail" style="display: none;">' + description + '</div></div>');
    }
    self.setupPortlet();
 },
 setupPortlet: function () {
    $("div.allStrengths").sortable({
       containment: "table.Data td div.allStrengths",
       connectWith: "table.Data td div.allStrengths",
       handle: "table.Data td div.allStrengths",
       cancel: ".portlet-toggle",
       placeholder: ".placeholder"
    });
    $(".portlet")
    .addClass("ui-widget-content ui-helper-clearfix ui-corner-all")
    .find(".head")
      .addClass("ui-widget-header")
      .prepend("<span class='ui-icon ui-icon-plus portlet-toggle' style='float:right;'></span>");
    $(".portlet-toggle").click(function () {
       var icon = $(this);
       icon.toggleClass("ui-icon-minus ui-icon-plus");
       icon.closest(".portlet").find(".tail").toggle();
    });
 }

我遵循(并修改)这里在下给出的示例来初始化

我不确定我是否理解你的问题。但是切换到AJAX似乎不会影响实现的功能。

所以我尝试用动态填充的数据来复制你的问题。我在jquery-ui-sortable的handle中发现了一个问题。您提供的句柄不起作用。

所以我把它改为更直接的方法，直接使用.head类的portlet头代替，它工作得很好。

$(".allStrengths").sortable({
       containment: "table.Data td div.allStrengths",
       connectWith: "table.Data td div.allStrengths",
       handle: ".head",
       cancel: ".portlet-toggle",
       placeholder: ".placeholder"
});

这里是Working Demo

希望这有助于你的事业。