使用工具提示拖放

Question

我尝试拖放一些 div，但在拖动它们之前，我会在鼠标悬停时显示一个工具提示。

在 Firefox 中它按预期工作，但在 Chrome 中，当拖动开始时，div 太大并且包含一些有趣的东西：不仅是它的内容，还有工具提示后面的所有窗口部分（图像中的红色部分）。

<div class="tooltip" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"
    onmousedown="mouseDown();">
    Hover over me
    <span class="tooltiptext" id="ttt">Tooltip text</span>
    </div>
</div>

完整示例位于：https://jsfiddle.net/dfs3ao13/5/

PS：工具提示在小提琴中只工作一次（一次拖动后不可见）。您可能需要刷新页面

Answer 1

这看起来像一个 Chrome 错误：当可拖动元素开始拖动时，拖动元素的拖动图像不仅包括其内容，还包括该元素绝对子节点以下的所有页面内容（在本例中为工具提示） .但是，经过一番搜索，我找不到任何与此问题相关的错误报告。

这个问题可以通过两个步骤解决：

1. 当元素开始拖动时，将工具提示的高度设为0。这样，工具提示不会屏蔽任何页面内容。另外，将display 设为none，这样工具提示就不会出现在拖动图像中
2. 拖动结束时，将tooltip的高度设置为auto，将其display放回block。

这是一个有效的jsfiddle。请检查。

Answer 2

我也遇到过同样的问题，即拖动预览会快照 chrome 中可拖动元素后面的任何内容

这可以通过添加样式来解决，这些样式强制浏览器认为可拖动元素位于其自己的复合层上，因此快照仅在快照期间尝试捕获该层以进行预览

任何将其传递给 GPU 的 CSS 转换规则都可以实现这一点。尝试向您的可拖动元素添加一个执行此操作的类名应该可以解决问题。它不会影响外观，因此即使不拖动也可以永久添加

.draggable { 
  transform: translateZ(0);
}