如何移除Y轴draggable element的拖拽镜像效果？

方法一：通过CSS直接禁用默认拖拽镜像 #

给你的可拖拽元素添加以下CSS样式：

.y-axis-draggable {
  -webkit-user-drag: none;
  user-drag: none;
}

user-drag: none会阻止浏览器生成默认的拖拽镜像，-webkit-user-drag是针对Chrome、Safari等webkit内核浏览器的兼容前缀。

方法二：通过JavaScript自定义拖拽图像（设为透明空图） #

在元素的dragstart事件中，将拖拽图像替换为1x1的透明图片，完全隐藏虚影：

const draggableBtn = document.querySelector('.y-axis-draggable');
draggableBtn.addEventListener('dragstart', (e) => {
  // 创建透明空图像
  const emptyImage = new Image();
  emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
  e.dataTransfer.setDragImage(emptyImage, 0, 0);
});

这种方法兼容性更好，适用于所有支持HTML5拖拽API的浏览器。

补充：如果是图片元素的拖拽虚影 #

若你的可拖拽元素是<img>标签，除了上述方法，还可以直接设置draggable="false"，但这会让图片失去可拖拽属性，仅适用于不需要保留拖拽功能的场景。

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