删除 Ace 编辑器绝对定位的"X"div(它搞砸了拖放)

Question

我正在尝试在包含 Ace 编辑器的div 上使用 HTML5 拖放 API，但它没有按预期工作。该问题涉及拖动元素时出现的重影图像。

通常，拖动元素

时，重影元素会出现在光标下方。但是HTML拖放API，至少在Chrome中，会向下推图像的顶部，以使所有内容都适合页面（或类似的东西）。不知道我的意思？看看这个JSFiddle。拖动顶部，其图像将完全显示在您期望的位置。拖动底部，重影图像将显示在光标下方。这是由绝对位于第二个中的子div 引起的。

那么这与Ace Editor有什么关系呢？好吧，所有 Ace 编辑器都有一个奇怪的div作为他们的最后一个元素。我不确定它的用途，但它是绝对定位的，有两个绝对定位的孩子，其中第二个包含一些字母X.有谁知道这是干什么用的？有没有办法禁用它？删除它可以解决问题，并且似乎不会破坏编辑器。

需要一个示例 Ace 编辑器来检查？查看此页面。包含X的div 如下所示：

<div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; white-space: pre; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; overflow: visible;">
  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>

虽然它有一个兄弟姐妹和父母，style相似。

Answer 1

该div 用于测量字体大小，因此删除它会在更改字体大小时破坏编辑器。

您可以在拖放后editor.renderer.$fontMetrics.el.style.display = "none"拖放后恢复它，但将 top 设置为 0 似乎不会破坏任何东西，因此您可以尝试要求他们不要将其设置为 -100

Answer 2

这似乎在最新版本的 ACE 中得到了解决，但我遇到了类似的问题，这些问题是由一些高度设置为 1e+06px 的 ACE 层引起的。我只需在通过 CSS 规则拖动时将它们的高度设置为 0 来解决它。这样做的代价是在拖动过程中失去 ACE 编辑器内容可见性，但这对我来说很好，因为没有人可能需要在拖动其容器期间编辑内容。CSS 规则可能非常简单：

.[some-dragging-class] .ace_layer { height 0 !important; }