-
Notifications
You must be signed in to change notification settings - Fork 214
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
Comments
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);
First, could you try not making any state changes (i.e. do nothing) within the onChange={(order) => {
// do nothing
}} If no errors being occurred, try the following: onChange={(order) => {
setTimeout(() => {
this.props.sortByOrder(order); // Call your sort method
}, 0);
}} |
You can paste your sample code here that will be useful to find out what's going wrong. |
part of code
on sorting update component state and submit new order to server(websocket). if |
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. |
yes i have many columns and i sort card beetwen them |
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. |
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. |
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. |
The "onChange" method relied on Sortable's 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 Replace onStart event with onChoose event might be a solutioin to it, unfortunately, the new |
Hi, is this related (facebook/react#8025), if so please upgrade chrome, i persume it solves the issue. |
The latest version of [email protected] should have resolved the problem. Has anyone tried it? |
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 |
I have the latest version of sortablejs and react-sortablejs. |
I had the same issue using sortablejs (not using react). I solved with a small modification of the sortablejs library. I made a pull request with my small patch: |
I use newest version of sortablejs, 1.15.3, still can reproduce this issue. |
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
The text was updated successfully, but these errors were encountered: