如何在拖动过程中隐藏（或更改）不允许拖动的光标？

Question

嗨。

我正在尝试找出如何在拖动操作期间隐藏“不允许拖动”光标。

如果无法删除，我也可以更改它。我觉得我没有得到什么，这听起来很容易，不是吗？

这里我做了一个小小提琴来展示这个问题：JSFiddle

box0.addEventListener('dragstart', dragStart);
box0.addEventListener('dragend', dragend);
box0.addEventListener('dragenter', dragEnter);
box0.addEventListener('dragover', dragOver);
container.addEventListener('dragenter', dragEnter);
container.addEventListener('dragover', dragOver);
container.addEventListener('dragend', dragend);

function dragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
    setTimeout (() => {e.target.classList.add('boxh');}, 0);}
function dragend(e) {
    e.target.classList.remove('boxh');
}
function dragEnter(e) {
    e.preventDefault();
    }

Answer 1

为了防止禁止光标，

preventDefault()

还需要位于目标元素（！！） - 最好是整个文档

document.addEventListener("dragover", (event) => {
    event.preventDefault();
});

Answer 2

要隐藏不允许的光标并使拖放区域有效，您需要在dragOver和dragEnter上应用preventDefault。

一旦有了有效的放置区域，您就可以使用 e.dataTransfer.dropEffect 将光标更改为“复制”、“移动”、“链接”、“无”。 （https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect）

不幸的是，似乎没有无光标选项。

onDragOver={e => {
    e.dataTransfer.dropEffect = "move";
    e.preventDefault()
}}
onDragEnter={e => {
    e.preventDefault()
}}

Answer 3

我不知道我是否能回答这个问题（已经一年多了），但今天我偶然发现了这个问题，我很惊讶使用 JS 拖动元素时更改光标是多么困难。

我尝试使用 dataTransfer 对象、dropEffect 属性和 DragEvent 事件，但这些都不适合我（即使遵循 MDN Web 文档）。

因此，对于那些在拖动时仍在努力更改光标的人，请尝试这样做（这对我有用）：

总结说明：只需将指针事件设置为 none 的 CSS 类添加到您不希望显示“不允许”光标的元素即可。

// Get the container
const file_container = document.querySelector("#file_container")

// Get the files
const files = document.querySelectorAll("[data-id='file']")

// Iterate each file
for (let file of files)
  {
    // Start to drag the file
    file.addEventListener("dragstart", (ev)=>{
      ev.target.classList.add("ds_awaiting_file")
    })

    // Allow drop by preventing dragover event
    file_container.addEventListener("dragover", (ev)=>{ev.preventDefault()})

    // Remove applied styles to the awaiting file
    document.addEventListener('dragend', ()=>{
      file.classList.remove("ds_awaiting_file")
    });
  }

/* Problem Solver (select div's children) */
[data-id=file] *
{
  pointer-events: none;
}

/* General Style */
#file_container
{
  display: grid;
  grid-template-columns: 160px 160px 160px;
  grid-template-rows: 100px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

[data-id=file]
{
  border: 2px solid #1E3050;
  padding: 12px 60px
}

.block
{
  background-color: #1E3050;
  height: 40px;
  width: 40px;
}

.ds_awaiting_file
{
    opacity: 0.3;
}

<div id="file_container">

  <div data-id="file" draggable="true">
    <div class="block"></div>
    <p>File_1</p>
  </div>

  <div data-id="file" draggable="true">
    <div class="block"></div>
    <p>File_2</p>
  </div>

  <div data-id="file" draggable="true">
    <div class="block"></div>
    <p>File_3</p>
  </div>

  <div data-id="file" draggable="true">
    <div class="block"></div>
    <p>File_4</p>
  </div>

</div>

这将在拖动操作期间隐藏“不允许拖动”光标 但是请记住（在某些浏览器中，例如Google Chrome和Opera），边框和边距仍将被视为不允许的元素。