CSS content属性导致HTML元素失去拖拽能力，能否实现可拖拽？

我需要制作可拖拽的HTML元素，通过切换样式用CSS content 属性插入图片，但发现添加content后元素失去了拖拽功能（Chrome测试中，无content的div可以正常拖拽，带content的完全没反应）。想知道是否可以实现带content属性元素的拖拽？

最简示例代码 #

<!DOCTYPE html PUBLIC>
<html>
 <head>
  <style type="text/css">
   .no-picture {
    width: 100px;
    height: 100px;
    border: solid 10px black;
   }
   .with-picture {
    width: 100px;
    height: 100px;
    border: solid 10px black;
    content: url(myimage.png);
   }
  </style>
 </head>
 <body>
  <div class="no-picture" draggable=true></div>
  <div class="with-picture" draggable=true></div>
 </body>
</html>

问题原因 #

content 属性是为CSS伪元素（::before/::after）设计的标准用法，直接将其应用在普通元素（比如div）上属于非标准操作。Chrome等浏览器处理这种非标准用法时，会改变元素的渲染盒模型，导致拖拽相关的交互事件无法被正常捕获，从而使draggable="true"失效。

解决方案 #

方案1：用伪元素承载图片（推荐，符合标准）

将content属性转移到伪元素上，保持原div的拖拽能力，同时通过伪元素显示图片：

.with-picture {
  width: 100px;
  height: 100px;
  border: solid 10px black;
  position: relative; /* 让伪元素相对于父元素定位 */
}
.with-picture::before {
  content: url(myimage.png);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 让拖拽事件穿透到父div，不被图片拦截 */
}

这种方式完全符合CSS标准，伪元素的图片不会干扰原div的拖拽事件，同时达到了通过样式切换显示图片的需求。

方案2：手动绑定拖拽事件（兼容非标准用法）

如果一定要直接在元素上使用content，可以通过添加CSS属性并手动监听拖拽事件来修复：
首先修改CSS：

.with-picture {
  width: 100px;
  height: 100px;
  border: solid 10px black;
  content: url(myimage.png);
  user-select: none; /* 防止图片被选中，干扰拖拽触发 */
}

然后添加JavaScript代码手动处理拖拽事件：

const draggableEl = document.querySelector('.with-picture');

draggableEl.addEventListener('dragstart', (e) => {
  // 必须设置dataTransfer数据，否则拖拽可能无法触发
  e.dataTransfer.setData('text/plain', 'draggable-element');
});

不过这种方法依赖浏览器对非标准用法的兼容，稳定性不如方案1，不推荐在生产环境使用。

总结 #

优先选择伪元素方案，既能满足样式切换显示图片的需求，又能完美保留拖拽功能，避免浏览器非标准行为带来的兼容性问题。

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