Why is third-level nested SortableJS drag-and-drop not working?

Question

I'm using SortableJS to make a drag-and-drop form builder, with three types/levels of draggable items: Sections, Questions, and Options. Sections can be dragged and reordered among one another, Questions can be dragged within their parent Section, or into another Section, and Options can be dragged within their parent Question or into another Question.

This is working correctly for the Sections and Questions, but not for the Options. Somehow even though the ondragstart of the Option is firing, it immediately stops that event and instead triggers ondragstart for the parent question.

I've tried e.stopPropagation() within the Option's ondragstart function, but it isn't really helping. It prevent's the parent Questions ondragstart from firing, but it still isn't allowing the drag-and-drop sorting that Sortable is supposed to create. The Option becomes draggable and moves, but doesn't sort within its parent Question as it should

This is leading me to believe I have a problem with how I set up Sortable. Have I missed something obvious in the setup of the draggable area/items within Questions that I did correctly for Sections/Questions previously?

Fiddle: https://jsfiddle.net/robertgreenstreet/h8ocmL2p/4/

Code setting up the Sortable instance for Questions starts at line 105

R Greenstreet R Greenstreet · Accepted Answer · 2020-05-21T19:29:44

Found the issue. All it took was a simple if statement in the ondragstart for the parent question:

function addQuestionEventListeners(item) {
    item.ondragstart = function(e) {
        /* Checking to see if the item being dragged is an option for a question so that
        the question won't collapse if it is */
        if (!e.target.classList.contains('questionOption')) {
            fullForm.style.height = (fullForm.offsetHeight) + 'px';
            this.classList.add('dragging');
            this.querySelector('.collapse').classList.remove('show');
        };
    }
    item.ondragend = function(e) {
        this.classList.remove('dragging');
        this.querySelector('.collapse').classList.add('show');
        fullForm.style.height='';
    }
    item.ondragenter = function(e) {
        var dragging = document.querySelector('.dragging')
        if(dragging.classList.contains('preventCollapse') && dragging !== this) {
            this.querySelector('.collapse').classList.add('show');
        }
    }
}

Why is third-level nested SortableJS drag-and-drop not working?

1 Answers