为什么三级嵌套 SortableJS 拖放不起作用？

Question

我正在使用 SortableJS 制作拖放式表单生成器，其中包含三个 types/levels 可拖动项目：部分、问题和选项。部分之间可以相互拖动和重新排序，问题可以拖到它们的父部分中，或拖到另一个部分中，选项可以拖到它们的父问题中或拖到另一个问题中。

这对章节和问题都有效，但对选项无效。不知何故，即使选项的 ondragstart 正在触发，它也会立即停止该事件并触发父问题的 ondragstart。

我已经在 Option 的 ondragstart 功能中尝试了 e.stopPropagation()，但它并没有真正帮助。它阻止父问题 ondragstart 被触发，但它仍然不允许 Sortable 应该创建的拖放排序。选项变得可拖动并移动，但没有按应有的方式在其父问题中排序

这让我相信我对 Sortable 的设置方式有问题。在我之前为 Sections/Questions 正确设置的可拖动 area/items 设置中，我是否遗漏了一些明显的东西？

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

为问题设置 Sortable 实例的代码从第 105 行开始

Answer 1

发现问题。对于父问题：

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');
        }
    }
}

为什么三级嵌套 SortableJS 拖放不起作用？

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

html

javascript

drag-and-drop

sortablejs