为什么我的 ondragstart 操作在执行后立即被撤消？

Question

我正在制作一个具有三级分组的拖放式表单生成器：部分包含问题，部分包含选项。选项可以在问题内和问题之间拖动，问题可以在部分内和部分之间拖动，部分可以相互排序。

我正在使用 Bootstrap 的 collapse/show classes 来隐藏大部分问题，因为它们开始被拖动，因为有些问题可能有十几个选项，在拖动时保持打开状态不会让您看到它下面的任何问题。

然而，一旦 ondragstart 执行并从问题正文中删除 show class，将其折叠，它似乎立即被撤消。

我尝试遍历调试器中 ondragstart 之后调用的每一行，但找不到任何可以重新添加 show Bootstrap class.

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

Answer 1

事实证明，我所需要的只是为问题的 ondragenter 函数添加一个条件，以检查项目是否被拖动 A) 有 preventCollapse class AND B)不是也被拖过来的项目：

function addQuestionEventListeners(item) {
    /* Checking to see if the item being dragged is an option for a question so that
    the question won't collapse if it is */
    item.ondragstart = function(e) {
        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');
        }
    }
}

谁能像我五岁一样解释为什么一个元素会调用它自己的 ondragenter 函数？这对我来说没有意义。

为什么我的 ondragstart 操作在执行后立即被撤消？

Why is my ondragstart operation being undone immediately after executing?

html

javascript

drag-and-drop