Question

我有可拖动的div作为标签栏，您可以在其中拖动和重新组织标签。移动标签并将其拖动可以正常工作，但我遇到ondragenter和ondragleave的问题。我想要做的是当你拖动它时改变标签的背景颜色，当拖动离开时，我希望背景回到原来的状态。

正在发生的问题是，当您进入选项卡时，会添加该类并更改颜色，但是一旦您将鼠标移到子元素上，该类就会被移除并且颜色消失。

造成这种情况的原因是什么？ https://jsfiddle.net/cypqgrrm/

class Tab {

    public createTab(){
        let tab = document.createElement('div');
        tab.classList.add('tab');
        tab.draggable = true;
        tab.ondragenter = this.onTabDragEnter.bind(this);
        tab.ondragleave = this.onTabDragLeave.bind(this);
    }

    private onTabDragEnter(e: DragEvent) {
        e.stopPropagation();
        let target = <HTMLElement>e.currentTarget;
        target.classList.add('drag-hover');
    }

    private onTabDragLeave(e: DragEvent) {
        e.stopPropagation();
        let target = <HTMLElement>e.currentTarget;
        target.classList.remove('drag-hover');
    }

}

这是css：

.tab.drag-hover {
    background: #ccc;
}

Answer 1

您可以为拖动目标的子项禁用指针事件，以避免因输入子项而导致的dragleave事件：

.tab.drag-hover * {
    pointer-events: none;
}

在鼠标离开

1 个答案: