I'm using Sortable.JS for sortable drag and drop within a form builder. I want sections to be draggable (which is more or less working) and the questions within the sections to be draggable within the same section, or over into other sections.
What I'm running into is that I make the class card-text within each section tag a Sortable element, with the draggable option set to .formQuestion, which as far as I can tell from the docs should work perfectly.
However when the questions start dragging, the only place they're allowed to be dropped is within the form fields of themselves or another question.
Am I selecting the wrong thing to drag? Is there something wrong with the section.querySelector of the card-text class as targets?
https://jsfiddle.net/robertgreenstreet/y9pgqfxt/12/
Also, for some reason, it's not behaving the same on jsfiddle as on my computer, especially the ondragstart and ondragend events.
I have most of an answer finally:
I got the sorting to work within the sections by removing the Sortable assignment for each section, and instead assigning a new ondragover function to the .collapse class (this is the same element as the .card-text in the original question, the actual area that questions will be dragged within) within the sections that (very slowly) calculates whether the dragged element needs to be put above or below the child element it's being dragged over (Fiddle has been updated to reflect this).
I also assigned the existing dragEnd function to each section's ondragover event, which collapses all sections, then uncollapses the .collapse within the section that is currently being dragged over, and then that .collapse's ondragover event gets fired to allow sorting within that section.
This isn't perfect or fast, so if anyone can figure out why the nested/grouped functionality from Sortable wasn't working as expected, that part is still in the Fiddle, commented, within the loop through sections.