Можно ли полностью игнорировать детей при использовании событий в javascript? - PullRequest
Новая
       44

Можно ли полностью игнорировать детей при использовании событий в javascript?

0 голосов
/ 13 марта 2020

Я работал над веб-сайтом организации задач на работе, и у меня возникли препятствия. Я пытаюсь создать список задач , который содержит карты (аналогично тому, как работает trello). Мне удалось заставить карты правильно перетаскивать, и это работает так, как должно. Однако моя проблема связана с индикатором , который появляется, когда карта перетаскивается перетаскиваемой картой. Я разработал индикатор для активации при вводе цели сброса. Это работает до тех пор, пока не будет введен дочерний элемент внутри цели удаления. Как только это происходит, индикатор выходит из строя и фиксируется только при выходе из карты и повторном входе (при условии, что вы также не вводите дочерний элемент).

Итак, мне нужен способ игнорировать дочерние элементы и видеть только родительский элемент. Я пробовал разные методы, чтобы не захватывать и не пузырить, пока они не достигли детей, но это не помогло. Дети все еще заставляли удерживаемую карту полагать, что она вышла из цели сброса.

Поскольку мой код довольно длинный, я просто добавлю несколько строк из javascript. Имейте в виду, я немного новичок в веб-разработке, поэтому мой javascript может не соответствовать лучшим практикам. Первоначально код был лучше поддержан и красивее для просмотра, но поскольку я пробовал так много способов игнорировать детей, он получил немного hecti c.

В любом случае, любые указатели были бы замечательными , Заранее спасибо! 

function addListeners(card)
{
    //takes the interior card and adds listeners.
    card.draggable = true;
    card.style.cursor = 'pointer';
    $(card).on('click', card, function() { editCard(card) });

    card.addEventListener('dragstart', dragStart, false);
    card.addEventListener('dragend', dragEnd, false);
    card.addEventListener('dragenter', dragEnter, false);
    card.addEventListener('dragover', dragOver, false);
    card.addEventListener('dragleave', dragLeave, false);
    card.addEventListener('drop', dragDrop, false);
    //event.currentTarget !== event.target

    return card;
}

function dragStart()
{
    originalClassname = this.className;
    this.className += ' holding';
    this.id = 'dragged-card';
    previousStyle = this.parentNode.style.display;
    setTimeout(() => (this.parentNode.style.display = 'none'), 10);
}

function dragEnd() 
{
    this.className = originalClassname;
    this.parentNode.style.display = previousStyle;
}

function dragEnter(e) 
{
    console.log("enter");
    var enteredElement = e.currentTarget.parentNode;
    var dropIndicator = enteredElement.querySelector("#drop-indicator");
    dropIndicator.className += ' indicator-active';
}

function dragOver(e)
{
    e.preventDefault();
}

function dragLeave(e) 
{
    console.log(e.currentTarget.parentNode);
    if (e.currentTarget.parentNode === enteredElement)
    {
        var dropIndicator = e.currentTarget.parentNode.querySelector("#drop-indicator");
        dropIndicator.className = 'drop-indicator';
    }
    else
    {
        console.log("Still in element.");
    }
}

function dragDrop(e) 
{
    e.preventDefault();
    var dropIndicator = e.currentTarget.parentNode.querySelector("#drop-indicator");
    var draggedCard = document.getElementById('dragged-card');
    tasklist.insertBefore(draggedCard.parentNode, this.parentNode);
    dropIndicator.className = 'drop-indicator';
    draggedCard.id = '';

}

Несколько замечаний. Карты создаются динамически и попадают в список задач. Эта карта заканчивается следующим образом: 

<div id="card" style="">
    <div class="drop-indicator" id="drop-indicator"></div>
    <div class="card card-sizer" draggable="true" style="cursor: pointer;" id="">
        <span class="card-label" id="card-label" style="background: rgb(250, 86, 86);"></span>
        <info class="card-info">
            <h3 id="card-title">Stuff</h3>
            <p id="card-description">Thaangs</p>
        </info>
    </div>
</div>

Внутренняя карта с картой класса - это то, что передается функции прослушивателя событий.

...