如何将dropEffect光标作为样式的目标

<div id="draggable" draggable="true">拖动我</div>
<div id="droppable">放置到这里</div>

#draggable {
  width: 100px;
  height: 100px;
  background-color: #fdd;
  text-align: center;
  line-height: 100px;
  cursor: grab; /* 默认光标样式 */
}

#droppable {
  width: 200px;
  height: 200px;
  background-color: #dfd;
  text-align: center;
  line-height: 200px;
}

const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (event) => {
  event.dataTransfer.dropEffect = 'move'; // 设置拖动效果为移动
});

droppable.addEventListener('dragover', (event) => {
  event.preventDefault(); // 阻止默认行为以允许放置
  event.dataTransfer.dropEffect = 'move'; // 设置放置效果为移动
});

droppable.addEventListener('drop', (event) => {
  event.preventDefault(); // 阻止默认行为
  // 处理放置逻辑
});