取消拖拽时默认半透明效果需调用event.dataTransfer.setDragImage()自定义拖拽影像，因原元素已脱离渲染流，CSS无法覆盖；传入元素须已挂载DOM，设置pointer-events:none，并指定合理偏移坐标。
拖拽时被拖元素的默认半透明效果怎么取消
HTML5 拖放 API 中，dragstart 触发后浏览器会自动给被拖元素加一层半透明（通常是 opacity: 0.4 左右），这是 UA 默认样式，**无法通过 CSS 的 opacity 或 visibility 在原元素上覆盖掉**——因为拖拽过程中它已被移入 Drag Image（拖拽影像），原 DOM 节点实际已脱离渲染流。
真正能控制“拖拽中看到的图形”的方式只有两种：
- 调用
event.dataTransfer.setDragImage(elem, x, y)，传入自定义 DOM 元素作为拖拽影像 - 不调用它，则浏览器用元素快照（snapshot），此时你只能靠
::-webkit-drag伪类（仅 Chrome/Safari）临时干预，但兼容性差、不可靠
所以想完全自定义外观，必须用 setDragImage。
用 setDragImage 自定义拖拽影像的实操要点
setDragImage 看似简单，但容易因 DOM 状态或坐标错位导致影像不显示、偏移、闪烁。关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- 传入的
elem必须已在文档中（document.body.appendChild一下最保险），不能是刚document.createElement出来还没挂载的节点 -
x和y是相对于该elem左上角的偏移量，不是鼠标位置；通常设为10, 10让鼠标大致在图标左上区域，否则拖拽时影像会“甩出去” - 该
elem建议设pointer-events: none，避免拖拽过程中意外触发 hover/click - 别复用同一个 DOM 节点多次调用
setDragImage，Chrome 有缓存 bug，建议每次新建或 cloneNode
function handleDragStart(e) {
const dragImg = document.createElement('div');
dragImg.textContent = '? ' + e.target.textContent;
dragImg.style.cssText = `
padding: 4px 8px;
background: #2563eb;
color: white;
border-radius: 4px;
font-size: 14px;
pointer-events: none;
`;
document.body.appendChild(dragImg); // 必须挂载
e.dataTransfer.setDragImage(dragImg, 10, 10);
}
dragover/dragenter 时目标区高亮失效的常见原因
很多人想在拖拽经过目标区域时加个 border: 2px dashed #3b82f6，但发现样式不生效——根本原因是：**dragover 默认被浏览器取消，不触发重绘，CSS 伪类或 class 切换不会自动更新**。
必须显式调用 e.preventDefault() 才允许 drop 行为，同时也解锁了样式响应能力：
- 只在
dragover里e.preventDefault()，就能让:hover或 JS 添加的.drag-over类生效 - 但注意：不要在
dragenter里加preventDefault，它只触发一次，会导致后续dragover不再触发 - 离开时用
dragleave清除 class，别依赖drop事件清理，因为用户可能中途取消拖拽
target.addEventListener('dragover', e => {
e.preventDefault(); // 关键！否则样式不更新
target.classList.add('drag-over');
});
target.addEventListener('dragleave', () => {
target.classList.remove('drag-over');
});
target.addEventListener('drop', e => {
e.preventDefault();
target.classList.remove('drag-over');
// 处理投放逻辑
});
移动端和 Safari 对 drag API 的支持现状
HTML5 原生拖放 API 在移动端基本不可用：dragstart 等事件在 iOS Safari 和 Android Chrome 中默认被禁用，除非元素是 contenteditable 或表单控件，且需配合 -webkit-user-drag: element 才可能触发（但行为不稳定）。
所以如果你的应用需要跨端拖拽，不要依赖原生 API：
- PC 端可用原生 API +
setDragImage做精细控制 - 移动端必须降级为
mousedown/touchstart → mousemove/touchmove → mouseup/touchend自实现，配合transform: translate()模拟拖拽视觉反馈 - Safari 15.4+ 开始部分支持，但
setDragImage仍不工作，且不支持dataTransfer.items
真正在意体验的项目，现在普遍用 SortableJS 或 @dnd-kit/core 这类封装库，它们内部自动处理平台差异，比手写兼容逻辑省心得多。
