Add/remove class 基于可拖动的状态 div

Question

我设置了可拖动的 div，允许用户将数据类别拖到 table。由于数据的性质，我们需要给用户一个信号，告诉他们可以将数据放到哪里。

我想在页面其他地方的特定 div 中添加一个“突出显示”class，以向用户显示可以删除这些类别数据的位置。

下面的代码将新的 class 正确地添加到 div 中，但是当可拖动的 div 在没有完成拖动的情况下被放下时， class 不是删除。我觉得我错过了一些简单的东西。

<script>
    var columnsDrop = document.getElementById("columnsDrop");
    var rowsDrop = document.getElementById("rowsDrop");
    var filtersDrop = document.getElementById("filtersDrop");
    
    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
        columnsDrop.classList.add("highlight");
        rowsDrop.classList.add("highlight");
        filtersDrop.classList.add("highlight");
    }

    function drop(ev) {
        ev.target.appendChild(document.getElementById(data));
        columnsDrop.classList.remove("highlight");
        rowsDrop.classList.remove("highlight");
        filtersDrop.classList.remove("highlight");
    }
</script>

Answer 1

通过一些实验和额外阅读，我能够自己解决这个问题。

<script>
    const pill = document.querySelector('.filters__pill');
    const dropIcons = document.querySelectorAll('.drop__icon');
    
    pill.addEventListener('dragstart', dragStart);
    pill.addEventListener('dragend', dragEnd);
    
    dropIcons.forEach(i => {
        i.addEventListener('dragenter', dragEnter)
        i.addEventListener('dragover', dragOver);
        i.addEventListener('dragleave', dragLeave);
        i.addEventListener('drop', drop);
    });
    
    function dragStart() {
        dropIcons.forEach(i => {
            i.classList.remove('disabled');
            i.classList.remove('hidden');
        });
        pills.forEach(p => {
            p.classList.add('disabled');
        });
    }
    
    function dragEnd() {
        dropIcons.forEach(i => {
            i.classList.add('disabled');
            i.classList.add('hidden');
        });
        pills.forEach(p => {
            p.classList.remove('disabled');
        });
    }
</script>

Add/remove class 基于可拖动的状态 div

Add/remove class based on state of draggable div

html

javascript

drag-and-drop