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

Question

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

Windows 上的 Microsoft Edge 示例

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

Windows 上的谷歌浏览器示例

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

这是一个 codepen 示例，您可以在其中看到重现的行为

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>

背景/为什么重要：这可能被认为是一个小不便，但对于以拖放行为为中心的应用程序，这种用户体验事故可能会让最终用户感到困惑。图标不仅会与拖动图像争夺注意力，而且图标还可能会误导用户他们正在采取的行动。当可放置区域可用时使用“复制”图标，但用户可能正在移动（剪切）或从尚不存在的东西创建净新对象（考虑将新组件拖到方形空间或类似的屏幕上应用程序）。

标签： draggablemicrosoft-edge

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 示例链接

MS Edge 中的输出：

参考：

数据传输.dropEffect