CODEWITHSUNDEEP
javascriptjqueryjquery-uinestedjquery-ui-sortable
tadaa9
tadaa9

Reputation: 523

Uncaught HierarchyRequestError with "jQuery Ui Sortable"

I try to make sortable nested containers but I have an issue with the jQuery UI Sortable plugin and I can not find a suitable solution.

I simplified my problem and here is the code:

<div id="composition">
    <div class="aContainer">
        <div class="aContainer"></div>
    </div>
    <div class="aContainer"></div>
</div>

<script>
$("#composition").sortable({
    connectWith: ".aContainer"
});

$(".aContainer").sortable({
    connectWith: "#composition, .aContainer"
});
</script>

<style>
#composition
{
    padding: 15px;
    border: dotted 1px red;
}

.aContainer
{
    padding: 15px;
    border: solid 1px green;
}
</style>

You can try here : http://jsfiddle.net/ekSxg/

Drag a green container out the red container. You should have the following javascript error : Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

Have you an idea of the problem? Do you have a solution? Is it a bug?

Thanks!

Upvotes: 3

Views: 1403

Answers (1)

giang
giang

Reputation: 39

To create a nested sortable element as sortable container and sortable element, need to have a helper: clone and placeholder. When sorting, check if position placeholder is 0 then re-append placeholder to help the drag container know where to insert back and avoid Error

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

Here is the test on fiddle: http://jsfiddle.net/0umjf5tc/1/

Upvotes: 2

Related Questions