Почему моя операция ondragstart отменяется сразу после выполнения? - PullRequest
Новая
       5

Почему моя операция ondragstart отменяется сразу после выполнения?

0 голосов
/ 28 мая 2020

Я делаю конструктор форм перетаскивания с тремя уровнями группировки: Разделы, содержащие вопросы, содержащие параметры. Параметры можно перетаскивать внутри и между вопросами, а вопросы можно перетаскивать внутри и между разделами, а разделы можно упорядочивать между собой.

Я использую Bootstrap collapse / show классы, чтобы скрыть большинство вопросов, когда они начинают перетаскиваться, поскольку некоторые могут иметь дюжину дополнительных опций, и если оставить его открытым во время перетаскивания, вы не увидите никаких вопросов под ним.

Однако, как только ondragstart выполняет и удаляет класс show из тела Вопроса, сворачивая его, кажется, что он немедленно отменяется.

Я пробовал пройти через каждую строку, которая вызывается после ondragstart в отладчике и не смог найти ничего, что могло бы повторно добавить класс show Bootstrap.

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

1 Ответ

0 голосов
/ 28 мая 2020

Оказывается, все, что мне нужно, это добавить условие к функции ondragenter для вопросов, чтобы проверить, был ли перетаскиваемый элемент A) Имел класс preventCollapse И 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? Для меня это не имеет смысла.

...