在Microsoft Edge中拖动元素时是否可以隐藏其他图标? [英] Is it possible to hide the additional icon when dragging an element in Microsoft Edge?

问题描述

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

Windows上的Microsoft Edge示例

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

Windows上的Google Chrome示例

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> 

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

解决方案

我建议您在代码中使用 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中的输出:

参考:

DataTransfer.dropEffect

Microsoft Edge shows a confusing icon when dragging and dropping elements using the html "draggable" attribute. I think it might be considered a "cursor", but I am unsure. Regardless, is it possible to hide this copy/stop icon?

Microsoft Edge on Windows Example

As far as Windows is concerned, it looks like this icon only shows up on Edge. Chrome has a default behavior of a cursor change (much less obtrusive).

Google Chrome on Windows Example

Any browser on MacOS has neither the icon or the cursor change.

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 it matters: This could be considered a minor inconvenience, but for an application that is centered around drag and drop behavior this sort of UX mishap can be really confusing for the end user. Not only does the icon compete for attention with the drag image, but the icon is also potentially misinforming the user on the action they are taking. The "copy" icon is used when a droppable area is available, but the user could be moving (cutting) or creating a net new object from something that does not exist yet (think dragging a new component onto the screen in squarespace or a similar app).

解决方案

I suggest you to use DataTransfer.dropEffect property in your code may help to solve the issue for MS Edge.

The DataTransfer.dropEffect property controls the feedback (typically visual) the user is given during a drag and drop operation. It will affect which cursor is displayed while dragging. For example, when the user hovers over a target drop element, the browser's cursor may indicate which type of operation will occur.

Example:

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

Output in MS Edge:

Reference:

DataTransfer.dropEffect

这篇关于在Microsoft Edge中拖动元素时是否可以隐藏其他图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！