如何在Javascript中的dragstart或dragover中拖动时更改光标？

Question

我试图在放置区域上方时更改光标，我看到了这些问题但没有帮助：Q1，Q2和Q3，这是我尝试过的。首先我尝试使用以下方法在dragstart和dragover中更改它：

 event.target.style.cursor = "grabbing";

它不起作用，当拖尾时光标实际上会改变，但每当我尝试再次拖动它时它就不起作用。第二次尝试我创建了一个 css 类并将其添加到

event.target.classList.add('cursor-grabbing');

在dragstart和dragover中，但结果与第一次尝试相同，我尝试的最后一件事是：

 event.dataTransfer.dropEffect = 'grabbing';

这是我要更改的光标（拖动时的箭头）：

Answer 1

您已经注意到 CSS 光标和 dropEffect 属性不一样。您还可以看到，在此示例中，

<body>

上的光标是指针，而

<li>

元素上的光标是移动光标。

拖动可拖动元素时，CSS 光标会被拖放功能所取代。

dropEffect仅适用于具有dragover事件监听器的区域。在我的示例中，有四个带有 Dragover 事件侦听器的

<ul>

。每一种都有不同的效果

move

、

copy

、

link

，还有一种没有效果。您可以看到，当您拖动每个光标时，光标会发生变化。光标的外观取决于浏览器和操作系统。如果在没有定义效果的情况下拖动第四个

<ul>

，您可以尝试按 Ctrl、Shift 和 Ctrl+Shift 来查看不同的效果。因此，dropEffect 不适用于“任何”光标 - 它仅用于在拖动文件、图像或其他内容时实现与操作系统中相同的效果。

我还有一些代码被注释掉了。它是

<body>

上的拖拽事件的事件侦听器——因此光标实际上可以在整个文档中“设置样式”。

document.querySelector('ul').addEventListener('dragstart', e => {
  e.dataTransfer.setData("text/plain", e.target.dataset.id);
});

/*document.querySelector('body').addEventListener('dragover', e => {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'link';
});*/

document.querySelector('.droplists').addEventListener('dragover', e => {
  e.preventDefault();
  if(e.target.dataset.effect)
    e.dataTransfer.dropEffect = e.target.dataset.effect;
  let ul = e.target.closest('ul.drop');
  if (ul) ul.classList.add('over');
});

document.querySelector('.droplists').addEventListener('dragleave', e => {
  e.preventDefault();
  let ul = e.target.closest('ul.drop');
  if (ul) ul.classList.remove('over');
});

document.querySelector('.droplists').addEventListener('drop', e => {
  e.preventDefault();
  let id = e.dataTransfer.getData("text/plain");
  let ul = e.target.closest('ul.drop');
  if (ul) {
    ul.classList.remove('over');
    let li = document.createElement('li');
    li.textContent = `Item with the id ${id}`;
    ul.appendChild(li);
  }
});

body {
  cursor: pointer;
}

ul li {
  cursor: move;
}

.drop {
  border: solid 2px navy;
  width: 100px;
  min-height: 100px;
}

.drop.over {
  background-color: lightgray;
}

.droplists {
  display: flex;
}

<ul>
  <li data-id="1" draggable="true">Drag me 1</li>
  <li data-id="2" draggable="true">Drag me 2</li>
  <li data-id="3" draggable="true">Drag me 3</li>
</ul>
<div class="droplists">
  <ul data-effect="move" class="drop"></ul>
  <ul data-effect="copy" class="drop"></ul>
  <ul data-effect="link" class="drop"></ul>
  <ul class="drop"></ul>
</div>

如何在Javascript中的dragstart或dragover中拖动时更改光标？

问题描述投票：0回答：1

1个回答

最新问题

如何在Javascript中的dragstart或dragover中拖动时更改光标？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1