拖放时更改光标

Question

我有一个问题-在移动完成之前，没有应用任何光标更改。需要帮忙。我使用了很多练习，但是它们不能在这里工作，因为它们是链接：-（Changing Mouse Cursor for HTML5 Drag Drop Files (GMail Drag Drop)，Change cursor style when drag and drop in css）

const base = document.getElementById('base');
const items = base.children;
let dragElement;
setListeners(items);

function handlerDragstart(event) {
  const target = event.target;
  event.dataTransfer.dropEffect = "move";
  event.dataTransfer.effectAllowed = 'move';
  target.classList.add('active')
  target.style.cursor = 'move';
  dragElement = target;
}

function handlerDrop(event) {
  const target = event.target;
  base.insertBefore(dragElement, target);
  // dragElement.style.cursor = 'grab';
}

function setListeners(arrNodes) {
  for (let i = 0; i < arrNodes.length; i++) {
    arrNodes[i].addEventListener('dragstart', handlerDragstart);
    arrNodes[i].addEventListener('dragover', handlerDragOver);
    arrNodes[i].addEventListener('drop', handlerDrop);
  }
}

function handlerDragOver(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move'
}

body{
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#base{
  height: 80%;
  width: 50%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.item{
  width: 70px;
  height: 70px;
  border: 1px solid blue;
  margin-bottom: 10px;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item.active{
  cursor: move !important;
}
.item:active{
  cursor: move !important;
}

<div id="base">
      <div class="item" draggable="true">0</div>
      <div class="item" draggable="true">1</div>
      <div class="item" draggable="true">2</div>
      <div class="item" draggable="true">3</div>
      <div class="item" draggable="true">4</div>
      <div class="item" draggable="true">5</div>
      <div class="item" draggable="true">6</div>
    </div>