Nested Drag And Drop Issue

First two levels of nested drag-and-drop work, but last one trigger's parent's "ondragstart" event

by robertgreenstreet

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=.9, shrink-to-fit=no">
		<link rel="icon" href="/images/favicon.png" type="image/x-icon/">
		<!-- bootstrap styles -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
		<!-- google fonts Latio import -->
		<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
		<!-- FontAwesome styles and scripts -->
		<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
		<script src="https://kit.fontawesome.com/75e02839f8.js" crossorigin="anonymous"></script>
		<!-- <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> -->
		<link rel="stylesheet" href="/stylesheets/style.css">
		<!-- <link rel="stylesheet" href="/stylesheets/lmdd.css"> -->
    </head>
    <body>
		<header>
			
			<div class="container">
				<nav class="navbar navbar-dark bg-dark navbar-expand-lg fixed-top" id="navbar">
				  <a class="navbar-brand js-scroll-trigger" href="#top">Custom Forms</a>
				  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navHamburger" aria-controls="navHamburger" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<span class="icon-bar hamburger-bar"></span>
						<span class="icon-bar...

CSS

/* body {
    min-height:100vh;
} */

#flashMessages {
    margin-top:70px;
}

tr a {
    color:inherit;
    text-decoration: underline;
}

.form-section-label {
    font-size:1.5rem;
}

.addQuestionLink {
    text-decoration: underline;
    color: inherit;
    font-size: 1.5rem;
}

.addQuestionLink:hover, .addOptionLink:hover {
    color: inherit;
}

.collapseSection {
    text-decoration:underline;
    color:inherit;
}

.collapseSection:hover {
    color:inherit;
}

.sectionTitle {
    color: inherit;
    cursor: pointer;
}

.sectionTitle:hover {
    color: inherit;
}

.addOptionLink {
    text-decoration: underline;
    color: inherit;
    font-size: 1rem;
}

.sectionDragHandle, .questionDragHandle {
    cursor: pointer;
}

JavaScript

// const Sortable = require("sortablejs");

var fullForm = document.querySelector('#fullForm');
var sections = document.querySelectorAll('.formSection');
var questions = document.querySelectorAll('.formQuestion');
var addQuestionLinks = document.querySelectorAll('.addQuestionLink');
var addOptionLinks = document.querySelectorAll('.addOptionLink');
var addSectionLink = document.querySelector('.addSectionLink');
var questionDeleteButtons = document.querySelectorAll('.questionDeleteButton');
// var questionDragHandles = document.querySelectorAll('.questionDragHandle');
// var optionDragHandles = document.querySelectorAll('.optionDragHandle');

// for (var handle of questionDragHandles) {
//     handle.onmousedown = function(e) {
//         e.stopPropagation();
//     }
// }
// for (var handle of optionDragHandles) {
//     handle.onmousedown = function(e) {
//         e.stopPropagation();
//     }
// }

var sortableFormOptions = {
    group: {name: 'fullForm', pull: false, put: false},
    handle:'.sectionDragHandle',
    animation:150,
    draggable: 'section'
};

var formEditor = new Sortable(fullForm, sortableFormOptions);

function addSectionDragListeners(item) {
    item.ondragstart = function(e) {
    	fullForm.style.height = (fullForm.offsetHeight) + 'px';
        collapseAllSections(e);
    };

    item.ondragend = function (e) {
        this.querySelector('.collapse').classList.add('show');
        fullForm.style.height='';
    }

    item.ondragenter = function(e) {
        for (var section of sections) {
            section.querySelector('.collapse').classList.remove('show');
        }
        if(document.querySelector('.dragging').classList.contains('preventCollapse')) {
            this.querySelector('.collapse').classList.add('show');
        }
    }
    item.ondrop = function(e) {
        this.querySelector('.collapse').classList.add('show');
    }
}

var sectionsIndex = 0;
for (var section of sections) {

    var sortableSection = new...