html js css实现图片拖拽放置（解决了js无法修改css伪类样式的问题）

遇到个图片拖拽放置的需求，需要将图片移动到六边形上，按最初的想法通过dragstart、drop这些接口就能实现，最后修改六边形bg属性就行
但是做到最后发现在js中没法对::after这种伪类进行修改（这个六边形的效果就用到了伪类，这里没法像修改普通css属性一样对伪类进行修改），多方查找发现只能在js里面添加css代码从而覆盖对应的伪类样式，再结合我的思考最终思路：图片移动使用drop接收这个图片src，然后给这个六边形dom赋一个随机的id（这一步非常重要，id不能重复），再通过css的写入方法重写id为：（随机字符）的伪类样式，进而就可以实现这种需求，下面是核心代码：

function drop(event) {
  event.preventDefault();
  const imageUrl = event.dataTransfer.getData('URL');
  const divElement = event.currentTarget;
  let ids=generateId();
  divElement.setAttribute('id',ids);
  let cssstr=`#${ids}::after{ background:url('${imageUrl}') ;clip-path: var(--clip-path);content: "";position: absolute;top: var(--border-width);right: var(--border-width);bottom: var(--border-width);left: var(--border-width);background-size:100% 100%}`
  insertCSSRule(divElement,cssstr)
  //divElement.style.backgroundImage = `url(${imageUrl})`;
}
function insertCSSRule(element,cssStyle){
  const style = document.createElement('style')
  style.appendChild(document.createTextNode(cssStyle));
  element.appendChild(style)
}
function generateId() {
  const allowedChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const maxLength = 10;
  let result = "";
  for (let i = 0; i < maxLength; i++) {
    const randomIndex = Math.floor(Math.random() * allowedChars.length);
    result += allowedChars[randomIndex];
  }
  return result;
}