IT技术 - 拖放 - 显示在拖动图像上的固定元素 - 吾爱随笔录

我正在尝试使用 HTML 原生 API 并且没有任何插件来学习拖放功能。我尝试了以下代码

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

function App() {
  const items = Array(100).fill(null);
  const onDragStart = ev => {
    const element = ev.target;
    console.log(element);
    ev.dataTransfer.setDragImage(element, 50, 50);
    ev.dataTransfer.dropEffect = "move";
  };
  return (
    <div className="App">
      <Grid>
        {items.map((item, index) => (
          <GridItem key={index} draggable="true" onDragStart={onDragStart} />
        ))}
      </Grid>
      <FixedItem draggable="false" />
    </div>
  );
}

const Grid = styled.section`
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
`;

const GridItem = styled.section`
  display: inline-block;
  height: 200px;
  width: calc(50% - 20px);
  background: grey;
  margin: 10px 0;

  &:nth-child(2n) {
    margin-left: 10px;
  }

  &:nth-child(2n + 1) {
    margin-right: 10px;
  }
`;

const FixedItem = styled.aside`
  position: fixed;
  width: 100px;
  height: 50px;
  background: red;
  top: 20px;
  left: 30px;
`;

<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.1.1/styled-components.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

使用上面的按钮访问代码。上面的代码将导致如下布局：

color 中的元素red是固定元素。问题是当我开始拖动第一个元素时，拖动图像还包括固定red元素，如下图所示：

想知道是否有可能避免red在拖动图像上显示固定框。