Question

我正在尝试将jQuery UI的Sortable作为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();
    });
 }

我跟随（并修改）了查看来源下的here给出的示例进行初始化。

Answer 1

我不确定我是否理解你的问题。但切换到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

希望这有助于你的事业。

可排序的破解jQuery UI可排序（ajax加载）

1 个答案:

这是Working Demo