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

Question

当使用html“ draggable”属性拖放元素时，Microsoft Edge显示一个令人困惑的图标。我认为它可能被认为是“光标”，但是我不确定。无论如何，是否可以隐藏此复制/停止图标？

Windows上的Microsoft Edge示例

就Windows而言，此图标看起来仅显示在Edge上。 Chrome的默认行为是更改光标（不那么麻烦）。

Windows上的Google Chrome示例

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>

背景/重要性：可以认为这是一个小麻烦，但是对于以拖放行为为中心的应用程序，这种UX事故对于最终用户来说确实很令人困惑。图标不仅会与拖动图像争夺注意力，而且还可能会在用户执行操作时误告知用户。当可放置区域可用时，将使用“复制”图标，但是用户可能正在移动（切割）或从尚不存在的对象中创建净新对象（请考虑将新组件拖动到正方形空间或类似的屏幕上）应用）。

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