CODEWITHSUNDEEP
javascriptjqueryjquery-ui-sortabledomexception
Nicolas
Nicolas

Reputation: 1135

jqueryUI Sortable: Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

I've been using this tutorial to build a page where we can reorder and move div on a page: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

I've modified it to be able to dynamically add some divs on the page but when trying to reorder/move some of the divs, I sometimes get this error: Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3.

Here's my 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>

​

And here's the 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');
        }
    });
});

Here's my (simplified) code: http://jsfiddle.net/XnEwg/5/

Upvotes: 0

Views: 1752

Answers (1)

mechanicalfish
mechanicalfish

Reputation: 12826

Sortable should only be initialized once on container of items, you don't need do do anything when you add new items. Also items option should be string (selector) not an array of elements. Here is a simplified working version of your code:

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

Upvotes: 2

Related Questions