如何移除Chrome Linux下dragImage拖拽时的白色轮廓并设为透明？

针对你遇到的Linux版Chrome中自定义拖拽镜像出现白色轮廓的问题，可以尝试以下几种解决方案：

方案1：覆盖浏览器默认拖拽样式 #

给自定义的ghost元素添加额外CSS属性，强制消除轮廓和默认高亮：

document.addEventListener("dragstart", (e) => {
    const ghost = document.createElement("div");
    ghost.className = "bg-indigo-500 h-[30px] w-[100px] drop-shadow-md";
    // 添加样式消除默认轮廓
    ghost.style.outline = "none";
    ghost.style.border = "none";
    ghost.style.boxShadow = "none";
    ghost.style.webkitTapHighlightColor = "transparent";
    ghost.style.userSelect = "none";
    document.body.appendChild(ghost);

    e.dataTransfer.setDragImage(ghost, 0, 0);
    // 拖拽启动后立即移除ghost，避免冗余DOM
    setTimeout(() => document.body.removeChild(ghost), 0);
});

方案2：使用透明图片替代默认拖拽镜像 #

用1x1的透明base64图片作为拖拽镜像，同时通过绝对定位元素模拟自定义拖拽视觉，完全规避浏览器默认样式：

document.addEventListener("dragstart", (e) => {
    // 创建自定义拖拽视觉元素
    const dragVisual = document.createElement("div");
    dragVisual.className = "fixed bg-indigo-500 h-[30px] w-[100px] drop-shadow-md pointer-events-none z-50";
    document.body.appendChild(dragVisual);

    // 加载透明图片作为拖拽镜像
    const transparentImg = new Image();
    transparentImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
    transparentImg.onload = () => {
        e.dataTransfer.setDragImage(transparentImg, 0, 0);
    };

    // 监听拖拽事件更新视觉元素位置
    const updateDragPos = (e) => {
        dragVisual.style.left = `${e.clientX - 50}px`;
        dragVisual.style.top = `${e.clientY - 15}px`;
    };
    document.addEventListener("dragover", updateDragPos);

    // 拖拽结束后清理元素和事件监听
    const cleanUp = () => {
        document.body.removeChild(dragVisual);
        document.removeEventListener("dragover", updateDragPos);
        document.removeEventListener("dragend", cleanUp);
    };
    document.addEventListener("dragend", cleanUp);
});

这种方式完全由你控制拖拽视觉效果，不受浏览器默认样式干扰。

方案3：调整背景裁剪规则 #

给ghost元素添加background-clip: padding-box，限制背景范围，可能缓解轮廓显示问题：

ghost.style.backgroundClip = "padding-box";

以上方案中，方案2的可控性和兼容性最优，适合解决Linux Chrome特有的拖拽轮廓问题。

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