Draggable item with container can try to add into itself through its shadow

[gsouf]

Hi,

When you drag a draggable item that contains a valid container the shadow of the dragged item is still a valid container. That leads to an error when moving the dragged item over its shadow because the node tries to insert into itself.

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

See the fiddle and try to drag item 2 at the very bottom and move your mouse over the shadow: https://jsfiddle.net/tucxdqLv/1/

That comes from: https://github.com/bevacqua/dragula/blob/8c7f7a02bd6bc83aae2bbd0e591355761523c14b/dragula.js#L404

[gsouf]

Please note that the issue is more sever as expected.

When you release the mouse when the cursor is above the container in the shadow, then the drop event has the shadow as parent.

Please check the element printed into the console: https://jsfiddle.net/tucxdqLv/2/

[gsouf]

Workaround is to remove containers from the shadow with css

.gu-transit .container{
    display: none;
}

[dmitru]

It's an old topic, but the problem is still relevant.

A more elegant solution would be to use Node.contains method of the DOM API:

accepts: (el, target, source) => {
  return !el.contains(target);
},

And since the solution to the problem can be expressed with the existing Dragula API without dirty workarounds, I think the issue might be closed?

[gsouf]

Dont use this library, it's not maintained Le 12 avr. 2017 19:39, "Dmitry Borody" notifications@github.com a écrit :

It's and old topic, but the problem is relevant.

A more elegant solution which works for me is this, using the Node.contains method of the DOM API:

accepts: (el, target, source) => { return !el.contains(target); },

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bevacqua/dragula/issues/421#issuecomment-293653476, or mute the thread https://github.com/notifications/unsubscribe-auth/ADEQJ2TPr6ltbisbbtByb7x6KM6KP7bYks5rvQw-gaJpZM4JxUr5 .