ajax 内容更新后无法重新初始化 Sortable

Question

我正在使用 Sortable 在父组内组织列表，它们本身也是可排序的，类似于 multi 示例 demo page , 但有文字。这工作正常并使用以下代码：

var globObj = {};

function prepSortCats() {

    globObj.subCatsGroup = [];

    // Changing parent group order

    globObj.sortyMainCats = Sortable.create(catscontainer, {
        // options here omitted from example
        onUpdate: function( /**Event*/ evt) {
            // Send order to database. Works fine.
        }
    });

    // Changing sub list order

    globObj.subCatsGroup.forEach.call(document.getElementById('catscontainer').getElementsByClassName('subcatlist'), function(el) {
        var sortySubCats = Sortable.create(el, {
            // options here from example
            onUpdate: function( /**Event*/ evt) {
                // Send order to database. Works fine.
            }
        });
    });

}

页面加载时调用：

$(document).ready(function () {
    // Sortable
    prepSortCats();
});

到目前为止一切都很好。但是，用户可以将新元素引入任何列表（子列表或父列表）中。简而言之，用户添加的任何新元素首先被添加到数据库中，然后使用 ajax 刷新页面的相关部分以从数据库中提取更新的内容并显示。用户看到他们新添加的项目已添加到现有列表之一。 Ajax调用如下：

function refreshCategories() {
    var loadUrl = "page that pulls lists from database and formats it";
    $("#catscontainer")
        .html(ajax_load)
        .load(loadUrl);
    return false;
};

这也很好用。除了，Sortable 不再有效。我不能拖动任何列表。我的第一个想法是销毁现有的 Sortable 实例并重新初始化它们。在我调用 refreshCategories() 之后，我调用了以下内容：

if(globObj.sortyMainCats.length !== 0) {
    globObj.sortyMainCats.destroy();
}

if(globObj.subCatsGroup.length !== 0) {
    var i;
    for (i = globObj.subCatsGroup.length - 1; i >= 0; i -= 1) {
        globObj.subCatsGroup[i].destroy();
        globObj.subCatsGroup.splice(i, 1);
    }
}

prepSortCats();

但是Sortable还是没有效果。我引入了全局对象（尽管有争议），以便我可以将 Sortable 实例定位到它们的范围之外，但我似乎忽略了一些东西。有任何想法吗？很抱歉没有提供一个有效的例子。当我对服务器进行各种 ajax 调用时，我认为这在这里是不可能的。

更新

我显然误解了正在发生的一些动作。好吧，我应该先说我错过了在 ajax 和 refreshCategories() 重新加载页面的一部分后我仍然可以组织 group/parent 列表。这在很大程度上是能够对子列表进行排序的次要操作，我注意到它已经损坏并且仍然如此。

但它确实指出，尽管整个 $("#catscontainer") 已被更新版本的列表所取代（这就是它包含的所有内容，列表元素），Sortable 仍然有某种形式例如运行就可以了。我的理解是它以某种方式与被删除的元素相关联。现在我对如何让 Sortable 变得更加迷茫：(a) 只是从页面上的头开始，执行 prepSortCats() 就好像它是一个新页面加载并删除任何以前的 Sortable实例，或 (b) 在 ajax 调用识别添加的元素后获取剩余的 Sortable 实例。

更新 2

正在取得一些进展。

通过反复试验，我发现在调用 refreshCategories() 之后，调用 globObj.sortyMainCats.destroy() 甚至阻止了组列表的排序。然后，如果我在此之后调用 prepSortCats()，我可以再次移动它们。但不是子列表。

这不是决定性的，但看起来我成功地销毁并重新初始化了 Sortable，这是我的目标，但是 ajax 加载的元素与 Sortable.

Answer 1

我在错误的地方寻找答案，确定这是 ajax 加载内容的问题，并且 dom 与 Sortable 预期的内容有些不一致。

原来是异步问题。或者，更简单地说，当 Sortable 被要求重新启动时，ajax 正在加载的页面部分还没有准备好。

对于遇到同样问题的人，我改变了：

$("#catscontainer")
    .html(ajax_load)
    .load(loadUrl);

到

$("#catscontainer")
    .html(ajax_load)
    .load(loadUrl, function() {
         reinitSortable();
    });

其中 reinitSortable() 只是一个触发 destroy 和 prepSortCats() 函数的函数，类似于它们在上面的显示方式。

ajax 内容更新后无法重新初始化 Sortable

Cannot reinitalize Sortable after ajax content update

javascript

ajax

jquery

rubaxa-sortable

更新

更新 2