javascript - jqueryUI 可排序 : Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

Question

我一直在使用本教程构建一个页面，我们可以在页面上重新排序和移动 div: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

我已经对其进行了修改，以便能够在页面上动态添加一些 div，但是当尝试重新排序/移动某些 div 时，我有时会收到此错误:未捕获错误:HIERARCHY_REQUEST_ERR: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');
        }
    });
});

这是我的(简化的)代码:http://jsfiddle.net/XnEwg/5/

Answer 1

Sortable 只能在项目容器上初始化一次，添加新项目时不需要执行任何操作。另外 items 选项应该是字符串(选择器)而不是元素数组。这是代码的简化工作版本:

$('.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());
});

fiddle