在 Edge 中拖动 div 元素会导致事物消失答案

【问题标题】：Dragging div element in Edge causes things to disappear在 Edge 中拖动 div 元素会导致事物消失
【发布时间】：2022-10-24 13:44:57
【问题描述】：

我的问题的一个相当小的例子。

<!DOCTYPE html>
<html>
<head>
<title>Drag Issue</title>
<style>

body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background: gray;
}

div.area {
    box-sizing: border-box;
    position: absolute;
    overflow: hidden;
    display: block;
}

div.listbox {
    box-sizing: border-box;
    display: block;
    overflow: scroll;
    background: white;
    border: 1px solid black;
    padding: 3px;
}

div.item {
    display: block;
    background: white;
    font-family: Arial, Hevetical, sans-serif;
}

</style>

</head>
<body>
<div class="area" style="left:0%;top:0%;width:65%;height:33%;background:red">TEXT</div>
<div class="area" style="left:0%;top:33%;width:65%;height:33%;background:white">TEXT</div>
<div class="area" style="left:0%;top:66%;width:65%;height:34%;background:blue">TEXT</div>

<div class="area" style="left:65%;top:0%;width:35%;height:100%;background:green;padding:1em">
<div class="listbox" style="width:90%;height:80%;max-width:90%;max-height:80%">
<div class="item" draggable="true">abc</div>
<div class="item" draggable="true">def</div>
<div class="item" draggable="true">ghi</div>
<div class="item" draggable="true">jkl</div>
</div>
</div>

</body>
</html>

我需要能够将文本字段（整个文本块，而不是选定的文本）从列表框中拖到其他区域。在 Firefox 中，这很好用，我可以将项目拖放到任何地方（在这个例子中显然什么都不做）。在 Edge 中，只要我开始拖动，除了拖动块的直接祖先之外的所有区域都会消失。

哦，明白了：如果 Javascript 控制台是打开的，它要么不会发生，要么会在延迟后发生。

似乎是 Edge（和/或底层工具包）中的一个错误，但我需要一个解决方法。如果您拖动图像不会发生这种情况，但我需要能够拖动文本块。

我的情况的具体情况。 Edge 和 Firefox 是我唯一需要支持的浏览器，可以假定它们都是最近的，但任何基于 Javascript 的解决方法都必须完全是普通的。谢谢。

【问题讨论】：

标签： javascript html css microsoft-edge

【解决方案1】：

实际上，这是几天前发现的铬问题。更多信息，您可以查看this thread。

解决方法：

将以下样式应用于可拖动元素。在您的示例中，它应该是div.item。

transform: translate(0, 0);
z-index: 0;

使固定：

据说此问题已在版本 107 中修复。我已在 Edge Beta 107 中进行了测试，并且此问题已得到修复。因此，我们可以预期 Edge Stable 107 也会这样做。

【讨论】：