events - 拖动子元素时触发 Svelte 可拖动，onleave 事件

Question

我有一个元素，当我使用 dragenter 事件在其上拖动第二个元素时突出显示该元素，使用 dragleave 事件删除突出显示。highlight 元素有一个子元素，当拖动元素越过子元素时，会触发 dragleave 事件并且我失去了突出显示。我该如何防止这种情况？

REPL：https ://svelte.dev/repl/8846d8b9674d42ae86a410dbb737fb79?version=3.35.0

<script>
    let highlight=""
</script>

<div class="dropon {highlight}" 
    on:dragenter={ event => {
        highlight="highlight"
        console.log( "enters") 
    }} 
        on:dragleave={ event => {
    highlight=""
        console.log( "leaves") 
    }} 
>
    <div class="inner">
        drop on me
    </div>
</div>

<div class="drag" draggable={true}>drag me</div>

<style>
    .dropon {
        padding: 20px;
        margin: 10px;
        background: #fee;
    }
    .drag {
        padding:20px;
        margin: 10px;
        cursor:grab;
        background: #efe;
    }
    .inner {
            background: #eef;
        padding: 8px;
    }
    .highlight {
        background: red;
    }
</style>

标签： eventsdrag-and-dropsvelte

Answer 1

pointer-events: none;添加css.inner

像这样：

    .inner {
        pointer-events: none;
        background: #eef;
        padding: 8px;
    }