0

私はこのチュートリアルを使用して、ページ上でdivを並べ替えたり移動したりできるページを作成してきました：http： //net.tutsplus.com/tutorials/javascript-ajax/inettuts/

ページにいくつかのdivを動的に追加できるように変更しましたが、いくつかのdivを並べ替え/移動しようとすると、次のエラーが発生することがあります：Uncaught Error：HIERARCHY_REQUEST_ERR：DOMException3。

これが私の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>

</ p>

そしてここに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/

4

1 に答える 1

2

ソート可能は、アイテムのコンテナで一度だけ初期化する必要があります。新しいアイテムを追加するときに何もする必要はありません。また、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());
});

フィドル

于 2012-10-26T13:37:50.813 に答える