Javascript jqueryUI可排序：未捕获错误：层次结构\u请求\u错误：DOM异常3

我一直在使用本教程构建一个页面，在该页面上我们可以重新排序和移动div：

我已经对它进行了修改，以便能够在页面上动态添加一些div，但在尝试重新排序/移动一些div时，有时会出现以下错误：未捕获错误：层次结构\u请求\u错误：DOM异常3

这是我的html：

<div id="columns">
<ul id="column1" class="column">
</ul>
<ul id="column2" class="column">
</ul>
<ul id="column3" class="column">
</ul>
<ul id="column4" class="column">
</ul>

​

以下是js：

$('.column').sortable({
    items: $('li', '.column'),
    connectWith: '.column',
    handle: '.widget-head',
    placeholder: 'widget-placeholder',
    forcePlaceholderSize: true,
    containment: 'document',
    start: function(e, ui) {
        $(ui.helper).addClass('dragging');
    },
    stop: function(e, ui) {
        $(ui.item).css({
            width: ''
        }).removeClass('dragging');
        $('.column').sortable('enable');
    }
    });


$('#addAWidget').on('click', function(event) {
    var newWidget = '<li class="widget color-white"><div class="widget-head"><h3>Newly         added widget</h3></div><div class="widget-content"><p>Yet another lorem ipsum !</p></div>    </li>';
    $(newWidget).appendTo('#column' + $('#columnNumber').val()).sortable({
        items: $('> li', '.column'),
        connectWith: '.column',
        handle: '.widget-head',
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        containment: 'document',
        start: function(e, ui) {
            $(ui.helper).addClass('dragging');
        },
        stop: function(e, ui) {
            $(ui.item).css({
                width: ''
           }).removeClass('dragging');
            $('.column').sortable('enable');
        }
    });
});

$（'.column'）。可排序({
项目：$（'li'，'.column'），
连接方式：'.column'，
句柄：'.widget头'，
占位符：“小部件占位符”，
大小：true，
遏制：“文件”，
开始：功能（e、ui）{
$（ui.helper）.addClass（'拖动'）；
},
停止：功能（e、ui）{
$（ui.item）.css({
宽度：“”
}).removeClass（“拖动”）；
$（'.column'）。可排序（'enable'）；
}
});
$（'addAWidget'）。在（'click'，函数（事件）{
var newWidget='
新添加的widget又一个lorem ipsum！
；
$（newWidget）.appendTo（'#column'+$（'#columnNumber'）.val（））.sortable({
项目：$（'>li'，'.column'），
连接方式：'.column'，
句柄：'.widget头'，
占位符：“小部件占位符”，
大小：true，
遏制：“文件”，
开始：功能（e、ui）{
$（ui.helper）.addClass（'拖动'）；
},
停止：功能（e、ui）{
$（ui.item）.css({
宽度：“”
}).removeClass（“拖动”）；
$（'.column'）。可排序（'enable'）；
}
});
});

---

以下是我的（简化）代码：

在项目容器上只应初始化一次可排序项，添加新项目时无需执行任何操作。另外，

项

选项应该是字符串（选择器），而不是元素数组。以下是代码的简化工作版本：

$('.column').sortable({
    items: '> li',
    connectWith: '.column',
    handle: '.widget-head',
    placeholder: 'widget-placeholder',
    forcePlaceholderSize: true,
    revert: 300,
    delay: 100,
    opacity: 0.8,
    containment: 'document',
    start: function(e, ui) {
        $(ui.helper).addClass('dragging');
    },
    stop: function(e, ui) {
        $(ui.item).css({
            width: ''
        }).removeClass('dragging');
    }
});

$('#addAWidget').on('click', function(event) {
    var newWidget = '<li class="widget color-white"><div class="widget-head"><h3>Newly added widget</h3></div><div class="widget-content"><p>Yet another lorem ipsum !</p></div></li>';
    $(newWidget).appendTo('#column' + $('#columnNumber').val());
});

$（'.column'）。可排序({
项目：“>li”，
连接方式：'.column'，
句柄：'.widget头'，
占位符：“小部件占位符”，
大小：true，
回复：300，
延误：100，
不透明度：0.8，
遏制：“文件”，
开始：功能（e、ui）{
$（ui.helper）.addClass（'拖动'）；
},
停止：功能（e、ui）{
$（ui.item）.css({
宽度：“”
}).removeClass（“拖动”）；
}
});
$（'addAWidget'）。在（'click'，函数（事件）{
var newWidget='
新添加的widget又一个lorem ipsum！
；
$（newWidget）.appendTo（'#column'+$（'#columnNumber'）.val（））；
});

---

这可能会有所帮助。Thx Daniel，我已经读过这篇文章，据我所知，我正试图将div拖放到DOM中的一个不好的地方，但我不知道如何使用sortable选项来改变这一点。它是否与“包容”或“占位符”有关？我肯定我在sortable上做错了什么，但我看不出是什么：(