Skip to content
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

Solves "insert Before error" issue on nested lists #1784

Merged
merged 1 commit into from
Apr 14, 2020

Conversation

RomualdoGrillo
Copy link
Contributor

@RomualdoGrillo RomualdoGrillo commented Apr 4, 2020

That solves an issue with nested sortables.
example of error https://jsbin.com/xabonox/edit?html,css,js
An error appears when all following conditions are met:
1)You have two nested sortable containers
2)option “pull:clone” i set at least on the parent container
3)You drag an item from the parent container into the nested container

The item is moved but not cloned and you get the error:
“Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted”

That solves an issue with nested sortables.
example of error https://codepen.io/romualdogrillo/pen/jOPoRJe
An error appears when all following conditions are met:
1)You have two nested sortable containers
2)option “pull:clone” i set at least on the parent container
3)You drag an item from the parent container into the nested container

The item is moved but not cloned and you get the error: 
“Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted”
@RomualdoGrillo
Copy link
Contributor Author

RomualdoGrillo commented Apr 4, 2020

I have created an example here:
https://jsbin.com/xabonox/edit?html,css,js,output
That's just my second conribution to an open source project, tell me if I did something wrong.

Copy link
Contributor

@waynevanson waynevanson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@RomualdoGrillo

It looks like all the tests passed but I'm not confident in the test suite/my knowledge to approve this.

Thank you for providing an example. I see the error.

@@ -1692,7 +1692,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
if (Sortable.eventCanceled) return;

// show clone at dragEl or original position
if (rootEl.contains(dragEl) && !this.options.group.revertClone) {
if (dragEl.parentNode == rootEl && !this.options.group.revertClone) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (dragEl.parentNode == rootEl && !this.options.group.revertClone) {
if ( (rootEl.contains(dragEl) || dragEl.parentNode == rootEl ) && !this.options.group.revertClone) {

I have a feeling this might be safer. I'm unsure what remove the old check might do.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in my opinion the change above is equivalent to the original so doesn't solve the issue.
I try to better explain my proposal:

original) "rootEl.contains(dragEl)" means dragEl is a descendent of Root so it can be child, child of child etc...the condition is too broad and results in an error when dragEl is not just a child.

modified) "dragEl.parentNode == rootEl" means dragEl is child of root. That's exactly the condition you have to check before "rootEl.insertBefore(cloneEl, dragEl)", if the condition is not met the code will simply move on to one of the following methods to find the right insertion point.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sense to me

@RomualdoGrillo
Copy link
Contributor Author

RomualdoGrillo commented Apr 13, 2020 via email

@owen-m1 owen-m1 merged commit e02baa8 into SortableJS:master Apr 14, 2020
@RomualdoGrillo
Copy link
Contributor Author

RomualdoGrillo commented Apr 14, 2020 via email

@hoaxone
Copy link

hoaxone commented May 6, 2020

Hy There,
thanks for this great script.

I have this problem under the following conditions.

Two lists:

First list (tools):
Only items that allow nested.
"Pull: clone"

Second list (board):
The elements should be dropped here.

If the same element is dragged from the first list several times into the second, the nesting will go crazy. The same problem if it's only one item, which is automatically created several times when the page is started.

The only way to get around the problem is to work with items that have been in the DOM from the beginning.

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

Successfully merging this pull request may close these issues.

4 participants