拖放期间的 CSS 样式光标

Question

使用 HTML Drap and Drop API 时，如何更改光标的外观？

它似乎在使用默认的

no-drop

，而不是在可放置区域上，以及在可放置区域上时使用其他一些光标（我在标准光标列表中找不到）。由于我正在实现一个游戏，并且希望能够将项目拖放到彼此上，因此该 API 非常适合此目的，但我无法控制光标的外观。默认浏览器光标与我在整个游戏中使用的自定义光标非常不同，因此我希望能够修改它们。

我找到了这个答案，但我不会只是为了这个而将jquery添加到项目中。

是否有我可以使用的 css 伪元素或某种脚本方式（例如通过修改拖动事件）？我查看了 Drag & Drop API 文档 但无济于事。

如果我可以完全隐藏光标，我会很高兴。虽然不理想，但我可以使用它来使用 js 将自定义光标放置在屏幕上。

编辑：这就是我试图更改的光标的样子。一旦您开始拖动，它们就会出现（像这样或类似的） - 如果您位于放置区上方，则第一个出现，如果不在放置区上方，则出现第二个。

Answer 1

您可以做的是更改实际的放置区域元素，以指示该元素位于目标上方，如以下代码所示。

您可以进一步使用 CSS 伪元素来相应地设置光标样式。

下面是一个使用 CSS 伪元素的简单拖放 API 的示例。我在代码中添加了一些注释以供进一步理解，如果有任何问题或者这不是您想要的，请告诉我。

const items = document.querySelectorAll('.items');
const dropzone = document.querySelector('.dropzone');

items.forEach((item, j) => {

  let dragged = null;

  addEventListener("dragstart", (event) => {
    // store a ref. on the dragged elem to the event.target
    dragged = event.target;
  });

  addEventListener("dragover", (event) => {
    // prevent default to allow drop
    event.preventDefault();
    // are we over the drag dropzone? 
    // is dragged not null?
    if (event.target.classList.contains("dropzone") && dragged) {
      // add a classlist to indicate where to drop the draggable element
      event.target.classList.add('drag-over');
    }
  });

  addEventListener("dragleave", (event) => {
    if (event.target.classList.contains("dropzone") && dragged) {
      event.target.classList.remove('drag-over');
    }
  });

  addEventListener("drop", (event) => {
    // move dragged element to the selected drop target
    if (event.target.classList.contains("dropzone") && dragged) {
      // remove the draggable element from its parent element
      dragged.parentNode.removeChild(dragged);
      // append draggable element to the dropzone element
      event.target.appendChild(dragged);
      // remove classList drag-over upon drop event
      event.target.classList.remove('drag-over');
      // set dragged variable to null
      dragged = null;

    }

    // set dragged variable to null
    dragged = null;

  });

})

.drag-over {
  box-shadow: 0 0 2px 3px rgb(0, 0, 0);
}

#inv-overlay {
  position: absolute;
  top: 50px;
  left: 200px;
  display: inline-block;
  width: 100px;
  height: 100px;
  transition: opacity 0.2s linear;
  background-color: red;
  font-size: 1rem;
}

.items {
  width: max-content;
}

/* SETTING YOUR CURSOR STYLE ON HOVER */
.items:hover {
  cursor: move;
}

/* SETTING YOUR CURSOR STYLE ON ACTIVE */
.items:active {
  cursor: grabbing;
}

<div id="inv-overlay" class="dropzone"></div>
<div class="items" draggable="true">One</div>
<div class="items" draggable="true">Two</div>
<div class="items" draggable="true">Three</div>