移除HTML5可拖拽元素的拖拽阴影

要去掉HTML5原生拖放时元素右下角的阴影，直接用CSS就能搞定，针对你的.draggable元素，这里有两个简便方案：

方案1：覆盖拖拽状态的默认CSS样式 #

浏览器会给拖拽中的元素添加默认外观，我们可以通过CSS伪类直接覆盖：

.draggable:active,
.draggable:focus,
.draggable:drag,
.draggable.dragging {
  box-shadow: none !important;
  outline: none !important;
  /* 如果拖拽时还有默认透明度变化，也可以在这里重置 */
  opacity: 1 !important;
}

部分浏览器可能不支持:drag伪类，你可以配合事件给元素临时加类来兼容：

const draggableEl = document.querySelector('.draggable');
draggableEl.addEventListener('dragstart', () => draggableEl.classList.add('dragging'));
draggableEl.addEventListener('dragend', () => draggableEl.classList.remove('dragging'));

方案2：自定义拖拽预览（更灵活） #

如果默认样式不好控制，直接自定义拖拽时显示的元素，完全绕过浏览器的默认阴影：

document.querySelector('.draggable').addEventListener('dragstart', function(e) {
  // 克隆原元素的内容作为拖拽预览
  const preview = this.querySelector('.draggable-content').cloneNode(true);
  // 给预览元素设置无阴影样式
  preview.style.boxShadow = 'none';
  preview.style.width = '100px';
  preview.style.height = '100px';
  
  // 设置自定义拖拽预览图
  e.dataTransfer.setDragImage(preview, 0, 0);
});

另外，你的.draggable-layer作为点击遮罩层，只要没设置拖拽相关样式，不会影响阴影移除，重点还是处理.draggable本身的拖拽状态样式。

内容的提问来源于stack exchange，提问作者Donny van V