Blazor开发网页国际象棋时如何实现拖拽图标背景透明

解决方案 #

方案1：纯CSS修正（推荐，无需修改业务逻辑，完全满足无JavaScript要求） #

拖拽时携带背景的核心原因是浏览器默认会截取整个可拖拽元素的完整盒模型区域作为拖拽预览，包含元素的透明空白区域、行高带来的上下留白。仅需要修改PieceComponent.razor.css中的.piece-container样式即可解决：

.piece-container {
    display: inline-block;
    cursor: pointer;
    /* 新增修正代码 */
    background: transparent !important;
    padding: 0;
    margin: 0;
    line-height: 6vh; /* 与棋子图标尺寸完全匹配，消除行高带来的上下空白 */
    font-size: 0; /* 消除容器内隐形文本节点带来的额外空白 */
    -webkit-user-drag: element;
    user-drag: element;
}
/* 清除拖拽时浏览器默认生成的选中高亮背景 */
.piece-container ::selection {
    background: transparent;
}

修改后拖拽预览区域会和棋子图标完全重合，透明背景不会被视觉感知，最终效果仅显示棋子矢量轮廓。

方案2：调整拖拽触发对象 #

如果方案1不符合预期，可将可拖拽属性从外层块级div转移到内部字体图标元素上。字体图标本质是特殊文本字符，浏览器拖拽文本时默认仅预览字符本身，不会携带块级背景：

1. 修改PieceComponent.razor，移除外层div的draggable="true"和@ondragstart事件绑定
2. 修改PieceIcon.razor，为所有<i>标签添加可拖拽属性和事件绑定：

<i class="fas fa-chess-king @ColorClass" draggable="true" @ondragstart="@TriggerParentDragEvent"></i>

3. 在PieceIcon.razor的@code块中添加事件回调，将拖拽事件透传给父组件即可。

代码笔误提示 #

当前代码中PieceAllowDrop参数的setter逻辑存在问题：无论传入值为true还是false，都统一给DropClass赋值为"drop-allow"，可按需调整。

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