Microsoft Edge 视觉搜索可防止拖动图像

问题描述 投票：0回答：1

自 Microsoft Edge 版本 120 以来，视觉搜索的某些内容发生了变化，这会破坏在我的 Angular Web 应用程序中拖动图像。

img 元素具有属性 

draggable="true"
。
如果有人尝试用鼠标快速移动，则拖动会起作用，但对于正常的鼠标行为，一旦右上角的视觉搜索图标出现在图像中，则拖动 img 元素上的任何位置都不起作用。

在设置中禁用视觉搜索可以解决问题，但对于所有访问者来说并不是可行的解决方案。
其他浏览器（例如 Chrome）仍然可以正常工作。
我已经通过三点菜单发送了 Microsoft Edge 反馈。
我不认为这是一个错误，因为 Edge Beta 版本 122 也有同样的问题。
使用 

pointer-events: none;
就像问题中提到的那样：当用户将鼠标悬停在图像上时防止 Edge 显示视觉搜索图标确实隐藏了图标，但拖动仍然损坏。

有没有一种方法可以以编程方式告诉 Edge 不要完全显示我的应用程序的视觉搜索，或者以其他方式告诉 Edge 图像必须被拖动？
（出于可访问性的原因，我不想用背景图像之类的东西替换 img 元素作为解决方法）

更新可重现示例：
域名：

http://test123.local/

HTML：

<!DOCTYPE html>
<html title="MicrosoftEdgeVisualSearch" lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MicrosoftEdgeVisualSearch</title>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("data", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("data");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>
    <p>Drag the image into the rectangle:</p>
    <div style="width: 350px;height: 350px;border: 1px solid black;" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <img id="drag1"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png"
        draggable="true" ondragstart="drag(event)" width="350" height="350">
</body>

</html>

使其发挥作用：

  • 没有 localhost/ip/stackblitz 域
  • 图像必须大于 180px 左右
  • 默认 Microsoft Edge 设置
javascript html css drag-and-drop microsoft-edge
1个回答
0
投票

嗯，根据测试结果，我发现如果添加样式

pointer-events: none;
，Edge 的表现和 Chrome 中一样，需要拖动图像两次才能工作。

而且我发现jquery UI中的drag api与其有很好的兼容性，并且不会因为视觉搜索选项而出现你提到的问题。像这样的东西：

<head>
    <meta charset="utf-8" />
    <title>MicrosoftEdgeVisualSearch</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#dragImg").draggable();
            $("#droppable").droppable({
                accept: "#dragImg",
                drop: function (event, ui) {
                    var droppable = $(this);
                    var draggable = ui.draggable;
                    // Move draggable into droppable
                    draggable.appendTo(droppable);
                    draggable.css({ top: '0px', left: '0px' });
                }
            });
        });
    </script>
</head>
<body>
    <h3>Test Page..</h3>
    <br />
    <div id="draggable" class="ui-widget-content" style="width:350px;height:350px;border:1px solid blue">
        <img id="dragImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="350" height="350" alt="Alternate Text" draggable="true" />
    </div>
    <br />
    <div id="droppable" class="ui-widget-header" style="width:350px;height:350px;border:1px solid blue">
        
    </div>
</body>

也许您可以尝试一下，然后让我知道它是否符合您的需求。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.