Svelte拖拽元素dragStart时短暂变白问题排查

问题描述 #

我在基于Svelte开发可拖拽至dropzone的元素时，遇到一个问题：触发dragstart事件时，拖拽元素会短暂变白，拖拽一小段距离后才恢复正常。

相关代码 #

主组件代码 #

<script lang="ts">
    import { draggable } from "../shared/functions/draggable" 
    import { dropzone } from "../shared/functions/dropzone";

    let components: Array<string> = [
        "1",
        "2",
        "3",
        "4"
    ]
</script>

<div class="main">
    <div class="components">
        {#each components as component}
            <h1 use:draggable={component}>{component}</h1>
        {/each}
    </div>
    
    <div class="render" use:dropzone={
        {
            onDropped(componentId) {
                console.log(componentId)
            }
        }
    }>
        <h1>Hello World</h1>        
    </div>
</div>

draggable指令代码 #

export function draggable(node: HTMLHeadingElement, data: string) {
    let state = data;
    
    node.draggable = true;
    node.style.cursor = 'grab';

    function dragStart(e) {
        e.dataTransfer.setData('text/plain', state);
    }

    node.addEventListener('dragstart', dragStart);

    return {
        update(data: string) {
            state = data;
        },
        destroy() {
            node.removeEventListener('dragstart', dragStart);
        }
    };
}

dropzone指令代码 #

export function dropzone(node: HTMLHeadingElement, options) {
    let state = {
        dropEffect: 'move',
        dragOverClass: 'droppable',
        ...options
    };

    function dragEnter(e) {
        e.target.classList.add(state.dragOverClass);
    }

    function dragLeave(e) {
        e.target.classList.remove(state.dragOverClass);
    }

    function dragOver(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = state.dropEffect;
    }

    function drop(e) {
        e.preventDefault();
        const data = e.dataTransfer.getData('text/plain');
        e.target.classList.remove(state.dragOverClass);
        state.onDropped(data, e);
    }

    node.addEventListener('dragenter', dragEnter);
    node.addEventListener('dragleave', dragLeave);
    node.addEventListener('dragover', dragOver);
    node.addEventListener('drop', drop);
}

成因分析 #

这个现象并非创建悬浮元素耗时导致，核心原因是浏览器原生拖拽的默认行为：

• 触发dragstart时，浏览器会自动生成一个拖拽元素的"幽灵副本"（ghost image）作为拖拽过程的视觉反馈
• 若未显式设置该副本，浏览器会尝试捕获当前元素的快照，但捕获瞬间可能因渲染时机、元素样式或Svelte组件渲染与原生事件的交互，出现短暂的空白/变白效果

解决方案 #

通过在dragstart事件中显式设置拖拽幽灵图像，即可消除这个视觉闪烁：

方案1：使用元素自身作为快照（推荐） #

修改draggable指令中的dragStart函数，添加显式设置拖拽图像的代码：

function dragStart(e) {
    e.dataTransfer.setData('text/plain', state);
    // 显式指定拖拽图像为当前元素，偏移量设为0,0
    e.dataTransfer.setDragImage(node, 0, 0);
}

此方法让浏览器直接使用元素的当前状态生成幽灵副本，避免自动捕获时的闪烁问题。

方案2：自定义拖拽图像 #

如果需要自定义拖拽时的视觉效果，可以创建临时DOM元素作为拖拽图像：

function dragStart(e) {
    e.dataTransfer.setData('text/plain', state);
    // 创建自定义拖拽图像元素
    const dragImage = document.createElement('div');
    dragImage.textContent = state;
    dragImage.style.padding = '12px';
    dragImage.style.background = '#ffffff';
    dragImage.style.border = '1px solid #e0e0e0';
    dragImage.style.borderRadius = '4px';
    document.body.appendChild(dragImage);
    
    // 设置拖拽图像，拖拽开始后立即移除临时元素
    e.dataTransfer.setDragImage(dragImage, 0, 0);
    setTimeout(() => document.body.removeChild(dragImage), 0);
}

修改后，触发拖拽时元素不会再出现短暂变白的情况，拖拽视觉反馈会立即正常显示。

内容的提问来源于stack exchange，提问作者Saya