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

【问题标题】：Why is third-level nested SortableJS drag-and-drop not working?为什么三级嵌套的 SortableJS 拖放不起作用？
【发布时间】：2020-09-07 08:08:54
【问题描述】：

我正在使用SortableJS 制作拖放表单构建器，具有三种类型/级别的可拖动项目：部分、问题和选项。部分可以相互拖动和重新排序，问题可以拖动到其父部分中或另一个部分中，选项可以拖动到其父问题中或另一个问题中。

这适用于部分和问题，但不适用于选项。不知何故，即使 Option 的 ondragstart 正在触发，它也会立即停止该事件，而是为父问题触发 ondragstart。

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

这让我相信我在设置 Sortable 时遇到了问题。在我之前为部分/问题正确设置的问题中设置可拖动区域/项目时，我是否遗漏了一些明显的东西？

小提琴：https://jsfiddle.net/robertgreenstreet/h8ocmL2p/4/

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

【问题讨论】：

标签： javascript html drag-and-drop sortablejs

【解决方案1】：

发现问题。对于父问题，只需在ondragstart 中添加一个简单的if 语句即可：

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

【讨论】：