使用工具提示拖放

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. 拖动结束时，将工具提示的高度设为auto，并将其display恢复为block。

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

Answer 2

我遇到了同样的问题，其中拖动预览快照了chrome中可拖动元素背后的内容

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

任何将其传递给GPU的CSS转换规则都可以实现这一目标。尝试将可执行此操作的类名添加到可拖动元素中。它不会影响外观，因此即使不拖动也可以永久添加

.draggable { 
  transform: translateZ(0);
}