[bug] Nested sortable ignores nested items

[rmgreenstreet]

Describe the bug

First level sortable generation works fine, but within each child element, Sortable is completely ignored.

I'm making a drag-and-drop form builder, and the first level of sorting works great. However each of the sortable elements should also have a Sortable instance themselves, on the class .formBody, with the sortable items within them being the .formQuestion class, and a handle of .questionDragHandle.

In the debugger, I can see that each .sectionBody is created as a Sortable instance, but the click-and-drag on the specified children is completely ignored.

Expected behavior

Within each section element, each .formQuestion class div should be sortable within the section, as well as draggable between different section elements

Information

Version: sortablejs = ^1.10.1 Using the simple CDN for front-end, I couldn't figure out how to get it to work in the Node back-end to begin with. Not using Angular, Vue, React, etc.

Additional context Add any other context about the problem here.

Reproduction JSFiddle: https://jsfiddle.net/robertgreenstreet/jcodbv5n/6/

[devBinay]

Describe the bug

First level sortable generation works fine, but within each child element, Sortable is completely ignored.

I'm making a drag-and-drop form builder, and the first level of sorting works great. However each of the sortable elements should also have a Sortable instance themselves, on the class .formBody, with the sortable items within them being the .formQuestion class, and a handle of .questionDragHandle.

In the debugger, I can see that each .sectionBody is created as a Sortable instance, but the click-and-drag on the specified children is completely ignored.

Expected behavior

Within each section element, each .formQuestion class div should be sortable within the section, as well as draggable between different section elements

Information

Version: sortablejs = ^1.10.1 Using the simple CDN for front-end, I couldn't figure out how to get it to work in the Node back-end to begin with. Not using Angular, Vue, React, etc.

Additional context Add any other context about the problem here.

Reproduction JSFiddle: https://jsfiddle.net/robertgreenstreet/jcodbv5n/6/

Hey Dude, I have faced the same issue. try this

const targetElement = parentEle.querySelector(targetChildSelector)
const exactParent = targetElement.parentNode
new Sortable(exactParent , options)

[devBinay]

this is just a workaround till they address the issue. Thanks :)