为什么执行后立即取消我的ondragstart操作？ [英] Why is my ondragstart operation being undone immediately after executing?

问题描述

我正在制作具有三个分组级别的拖放表单构建器：包含问题的部分，包含选项的部分。可以在问题之内或之间拖动选项，问题可以在节之间或之间拖动，并且节可以相互排序。

我正在使用Bootstrap的崩溃 / show 类可在开始拖动时隐藏大多数问题，因为有些问题可以有十几个选项，并且

但是，一旦 ondragstart



>执行并从问题正文中删除 show 类，将其折叠起来，它似乎立即被撤消。

我尝试逐步调试调试器中 ondragstart 之后被调用的每一行，但找不到任何可以重新添加的东西显示 Bootstrap类。

提琴： https://jsfiddle.net/robertgreenstreet/jrdmv asw / 4 /

解决方案

原来，我所需要的只是在<$ c $中添加一个条件c> ondragenter 函数的问题，以检查是否拖动了该项目A） preventCollapse 类并且B）也不是将该项目拖动了：

  function addQuestionEventListeners（item）{
 / *检查项目是否被拖曳是一个问题的选项，因此如果
是* / 
 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'） &&拖动！== this）{
 this.querySelector（'。collapse'）。classList.add（'show'）; 
} 
} 
} 
  

有人可以像我这样解释吗？ m五个元素为什么要调用自己的 ondragenter 函数？对我来说没有意义。

I'm making a drag-and-drop form builder with three levels of grouping: Sections, which contain Questions, which contain Options. Options can be dragged within and between Questions, and Questions can be dragged within and between Sections, and Sections can be ordered amongst each other.

I'm using Bootstrap's collapse/show classes to hide the majority of Questions as they begin being dragged, since some can have a dozen plus options, and leaving it open while dragging wouldn't let you see any questions beneath it.

However, as soon as the ondragstart executes and removes the show class from the body of the Question, collapsing it, it seems to be undone immediately.

I tried stepping through each and every line that gets called after ondragstart in the debugger, and couldn't find anything that would re-add the show Bootstrap class.

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

解决方案

It turns out all I needed was to add a condition to the ondragenter function for Questions to check whether the item being dragged A) Had the preventCollapse class AND B) Was NOT also the item being dragged over:

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

Can anyone explain like I'm five why an element would call its own ondragenter function? It doesn't make sense to me.

这篇关于为什么执行后立即取消我的ondragstart操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！