jqueryUI Sortable: Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

Question

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/

http://stackoverflow.com/questions/1256394/what-exactly-can-cause-an-hierarchy-request-err-dom-exception-3-error may be this could help. — Daniel Euchar, Oct 26 '12 at 12:44
Thx Daniel, I already read this post and from what I understand, I'm trying to drag and drop a div into a bad place in the DOM, but I don't know how to change that with the options of sortable. Does it have to do with "containment" or "placeholder" ? I'm certain I'm doing something wrong with sortable, but I can't see what :( — Nicolas, Oct 26 '12 at 12:48

score 2 · Accepted Answer · answered Oct 26 '12 at 13:37

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

jqueryUI Sortable: Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

1 Answers1