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

Posted 2023-05-08

【中文标题】拖动子元素时触发 Svelte 可拖动，onleave 事件

【英文标题】：Svelte draggable, onleave event triggered when dragging over child elements

【发布时间】：2021-06-18 03:45:03

【问题描述】：

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

回复：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>

【参考方案1】：

在.inner上添加css pointer-events: none;

像这样：

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