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

问题

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).

回答1:

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

来源：https://stackoverflow.com/questions/57047735/is-it-possible-to-hide-the-additional-icon-when-dragging-an-element-in-microsoft

标签

draggable

microsoft-edge