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

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 ExampleAs 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 ExampleAny browser on MacOS has neither the icon or the cursor change.Here's a codepen example where you can see the behavior reproducedfunction 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 linkOutput in MS Edge:Reference:DataTransfer.dropEffect 这篇关于在Microsoft Edge中拖动元素时是否可以隐藏其他图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..