是否可以在 Microsoft Edge 中拖动元素时隐藏附加图标？

Question

使用 html "draggable" 属性拖放元素时，Microsoft Edge 会显示一个令人困惑的图标。我认为它可能被认为是 "cursor"，但我不确定。无论如何，是否可以隐藏此 copy/stop 图标？

Microsoft Edge Windows 示例

就Windows而言，这个图标似乎只出现在Edge上。 Chrome 具有光标更改的默认行为（不那么突兀）。

Google Chrome Windows 例子

MacOS 上的任何浏览器都没有图标或光标变化。

Here's a codepen example where you can see the behavior reproduced

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.setDragImage(document.getElementById("drag-image"), 0, 0);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

.droppable {
  float: left;
  min-width: 100px;
  min-height: 80px;
  border: 1px solid black;
  margin: 0 32px;
  padding: 8px;
}

#drag-image {
  background: #eee;
  padding: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
}

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)">
  <h1 draggable="true" ondragstart="drag(event)" id="drag1">Drag Me</h1>
</div>

<div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="drag-image">Drag Me</div>

Background/why 这很重要：这可能被认为是一个小麻烦，但对于以拖放行为为中心的应用程序来说，这种 UX 问题可能是最终用户真的很困惑。该图标不仅与拖动图像竞争注意力，而且该图标还可能误导用户正在执行的操作。当可放置区域可用时使用 "copy" 图标，但用户可能正在移动（剪切）或从尚不存在的对象创建净新对象（考虑将新组件拖动到方形空间中的屏幕上或一个类似的应用程序）。

Answer 1

我建议您在代码中使用 DataTransfer.dropEffect 属性 可能有助于解决 MS Edge 的问题。

DataTransfer.dropEffect 属性控制用户在拖放操作期间获得的反馈（通常是视觉的）。它将影响拖动时显示哪个光标。例如，当用户将鼠标悬停在目标放置元素上时，浏览器的光标可能会指示将发生哪种类型的操作。

示例：

function dragstart_handler(ev) {
  console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function drop_handler(ev) {
  console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
  ev.preventDefault();

  // Get the id of the target and add the moved element to the target's DOM
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

function dragover_handler(ev) {
  console.log("dragOver: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move"
}

div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}

<div>
  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection to move the element.
  </p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>

JsFiddle Example link

MS Edge 中的输出：

参考：

DataTransfer.dropEffect

是否可以在 Microsoft Edge 中拖动元素时隐藏附加图标？

Is it possible to hide the additional icon when dragging an element in Microsoft Edge?

draggable

microsoft-edge