3

我在使用带有动态创建的 DOM 元素的 jQuery UI .sortable 时遇到了一些麻烦。

基本上，我创建了一个大型的拖放表单创建器/编辑器，当一个新的表单元素添加到可放置区域时，它会创建一个 div 容器（称为 .connectedsortable），以及其中的表单元素（称为 .问题）。

两个 div 的外部， .connectedsortable 是一个可排序的列表，当页面上有许多这样的 div 时，我可以成功地将一个 .question 从一个拖到另一个，因为它们被链接为可排序 - 所以 .question 移动而 .connectedsortable 没有，如果 .connectedsortable 的所有内容都被删除，则 .connectedsortable 将从 DOM 中删除。

这就是问题所在。

由于我制作的 UI，我需要能够从 .connectedsortables 中转义问题并将它们在页面上移动，如果 - 当开始拖动 .question - 创建一个新的 .connectedsortable 就足够了在每个现有的 .createdsortable 之后，然后可以将 .question 放入其中。

在我的代码中，我有一个在 .sortable 开始时调用的函数，如下所示（以及我提取的许多其他代码，因为它不是这个问题所必需的）

$('.connectedsortable').sortable({
     connectWith : '.connectedsortable',
     start : function(event, ui) {
         createPlaceholders(ui.item);
     }
}).disableSelection();

函数 createPlaceholders() 然后包含以下内容

function createPlaceholders(widget) {

    var placeholder_html = '<div class="connectedsortable"></div>';

    $('.connectedsortable').each(function() {
        var $this = $(this);
        $this.after(placeholder_html);
    });

    $('#innercontent').children('.connectedsortable:first').before(placeholder_html);
    $('.connectedsortable').sortable('refresh');
};

这成功地在每个现有的 .connectedsortable 之后创建了一个新的，但是我无法将 .question 放入该容器中。

我认为在函数末尾刷新 sortable 意味着可以选择它们，但似乎并非如此。这让我真的很难过。

过去有没有人遇到过类似的事情？当 .sortable 已经在做某事或类似的事情时，更新 .sortable 是否存在问题？

4

0 回答 0