更新

Question

我使用Sortable来组织父分组中的列表，这些列表本身也是可排序的，类似于demo page上的 multi 示例，但是文本。这很好用，并使用以下代码：

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调用时，我不认为这是可行的。

更新

我明显误解了一些正在发生的行动。好吧，我应该通过说我错过了我可以在用aja x和refreshCategories()重新加载页面的一部分后仍然可以组织组/父列表。这是能够对子列表进行排序的次要操作，这是我注意到的已经破坏并且仍然如此。

但它确实指出，尽管$("#catscontainer")的整体被替换为清单的更新版本（并且包含所有内容，列出元素），Sortable仍然有在它上面运行的某种实例。我的理解是，它与被删除的元素有某种联系。现在，我对如何将Sortable变为以下任何一种方式更加迷失：（a）只是从头开始，执行prepSortCats()，好像这是一个新的页面加载并删除任何以前的{{1}实例，或者（b）在Sortable调用之后获取剩余的Sortable实例以识别添加的元素。

更新2

取得一些进展。

通过反复试验，我发现在调用ajax之后，调用refreshCategories()即使是在订购组列表时也是如此。然后，如果我在此之后拨打globObj.sortyMainCats.destroy()，我可以再次移动它们。但不是子列表。

这不是决定性的，但看起来我已成功销毁并重新初始化prepSortCats()，这是我的目标，但有关Sortable已加载元素的内容并非如此使用ajax。

Answer 1

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

原来这是一个异步问题。或者，更简单一点，当ajax被要求重新注册时，由Sortable加载的页面部分还没有准备就绪。

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

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

到

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

其中reinitSortable()只是一个触发destroy和prepSortCats()功能的功能，类似于上面显示的功能。

ajax内容更新后无法重新启动Sortable

更新

更新2

1 个答案: