Skip to content

Failed to execute 'insertBefore' on 'Node' #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
anagami opened this issue Jun 25, 2016 · 15 comments
Closed

Failed to execute 'insertBefore' on 'Node' #19

anagami opened this issue Jun 25, 2016 · 15 comments

Comments

@anagami
Copy link

anagami commented Jun 25, 2016

Hi!
some time. when move block from one column to top another, browser catch error in console Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node..
After this error app broken and need reload page.

Code broken on this line https://github.com/cheton/react-sortable/blob/master/src/index.jsx#L63

@cheton
Copy link
Collaborator

cheton commented Jun 25, 2016

The Node.insertBefore method:

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

For a controlled component, this line of code will move the draggable element from the target position back to the original position:

evt.from.insertBefore(evt.item, store.nextSibling);
  • evt.from is the parent of the draggable element.
  • evt.item is the draggable element.
  • store.nextSibling is the next sibling of the draggable element.

First, could you try not making any state changes (i.e. do nothing) within the onChange method and check if it still generates this error?

onChange={(order) => {
    // do nothing
}}

If no errors being occurred, try the following:

onChange={(order) => {
    setTimeout(() => {
        this.props.sortByOrder(order); // Call your sort method
    }, 0);
}}

@cheton
Copy link
Collaborator

cheton commented Jun 25, 2016

You can paste your sample code here that will be useful to find out what's going wrong.

@anagami
Copy link
Author

anagami commented Jun 26, 2016

part of code

let sortableOptions = {
    onUpdate: this.submitMoveCard,
    onAdd: this.submitMoveCard,
};
componentWillReceiveProps(nextProps) {
    ....
    this.setState({
        cards: nextProps.cards,
    });
}
submitMoveCard(event) {
    ...
    this.props.moveCard(reqData);
}

updateOrder(order) {
    ...
    this.setState({
        cards: newState
    });
}

return <Sortable tag="ul"
    options={sortableOptions}
    onChange={ (order) => this.updateOrder(order) }
>
    {this.renderCard()}

</Sortable>

on sorting update component state and submit new order to server(websocket).
when server response(also with ws) sortable component recive new props with updated order

if onChange callback wrapped with setTimeout - catch more often error.

@cheton
Copy link
Collaborator

cheton commented Jun 27, 2016

Not sure if it's caused by multiple sortable instances while mounting/unmounting component. I made an update in v1.0.1 that will remove the instance in componentWillUnmount. Hope this will work for you.

@anagami
Copy link
Author

anagami commented Jun 28, 2016

yes i have many columns and i sort card beetwen them
v1.0.1 - doesnt help

@cheton
Copy link
Collaborator

cheton commented Jun 28, 2016

If it's possible, could you create a zip archive that contains a workable example so that I can try to reproduce this issue from my side. Thanks.

@brybrophy
Copy link

I am getting the same error: NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

I have two image galleries that users can sort and drag/drop images between. I only seem to get this error when I try to pull an image from one gallery to the other within the first 5-6 seconds after the page loads.

@brybrophy
Copy link

https://gist.github.com/brybrophy/fffa54f39e18f93e9a436f0cd4a3c5dc

Here is a gist with some of the code. I am using mobx for state management which is why there are actions and no this.setState's.

@cheton
Copy link
Collaborator

cheton commented Oct 14, 2016

The "onChange" method relied on Sortable's onStart event to remember the original position of a draggable element. The "nextSibling" variable is used to store the next sibling of the draggable element.

https://github.com/cheton/react-sortable/blob/master/src/index.jsx#L38

options[name] = (evt) => {
    if (name === 'onStart') {
        store.nextSibling = evt.item.nextElementSibling;
        store.activeComponent = this;
    }
}

In normal circumstances, the onStart event should be fired immediately when dragging an item. However, if you do drag & drop very fast, the onStart event may be fired after dropping to the target container, and then evt.item will become an item in the target container as well. In that case, it's not possible to find the original dragging position due to a delayed onStart event.

Replace onStart event with onChoose event might be a solutioin to it, unfortunately, the new onChoose event is only available in Sortable's latest master branch, not in [email protected] on NPM. A new version release is necessary for binding new events.

@sathishsoundharajan
Copy link

Hi, is this related (facebook/react#8025), if so please upgrade chrome, i persume it solves the issue.

@cheton
Copy link
Collaborator

cheton commented Nov 28, 2016

The latest version of [email protected] should have resolved the problem. Has anyone tried it?

@chipit24
Copy link

chipit24 commented Dec 7, 2016

I'm using react-sortablejs 1.2.0 and sortablejs 1.5.0-rc1 and still having this issue. Also on a recent version of Chrome (v55).

For now, I'm getting around this by marking the items as deleted, and then batching the deletes up into a deferred function. A style of display: none is applied to items marked as deleted, so the UI still appears to behave the same.

@LucianHij
Copy link

I have the latest version of sortablejs and react-sortablejs.
I am using multi-dragging with onChoose (i tried also with onStart), but no success.
I am getting the same error: Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'

@RomualdoGrillo
Copy link

RomualdoGrillo commented Apr 4, 2020

I had the same issue using sortablejs (not using react).
An error appears when all following conditions are met:
1)You have two nested sortable containers
2)option “pull:clone” is set at least on the parent container
3)You drag an item from the parent container into the nested container

I solved with a small modification of the sortablejs library.

I made a pull request with my small patch:
SortableJS/Sortable#1784

@yich-wa
Copy link

yich-wa commented Sep 24, 2024

I use newest version of sortablejs, 1.15.3, still can reproduce this issue.
When I select two discontinuous cards in a list, and drag them to another empty list. This will reproduce.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants