用工具提示拖拽

我嘗試拖放一些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：提示工作只有一次在小提琴（一個阻力後不可見）。您可能需要刷新頁面

來源

2017-05-16 Benjamin

最新問題？你想實現什麼？ –

在Chrome瀏覽器裏面沒有與奇怪的東西大的div – Benjamin

我們可以看到一個圖像，它不清楚你正在遇到 – randomguy04

這看起來像一個Chrome bug：當可拖動元素開始拖動時，拖動元素的拖動圖像不僅包括其內容，還包括該元素的絕對子節點下的所有頁面內容（在這種情況下，工具提示）。但是，經過一番搜索之後，我找不到與此問題有關的任何錯誤報告。

這個問題可以通過2個步驟有一個解決辦法：

當元素開始拖動，使工具提示的高度0。這樣，工具提示將不會屏蔽任何頁面內容。此外，請display爲none，使工具提示不會拖圖像中
當拖動結束時，把提示的高度爲auto，並把它display回block。

這是一個工作jsfiddle。請檢查。

來源

2017-05-17 06:56:27 shaochuancs

感謝您的答案，但給定的小提琴不起作用：拖動時，工具提示不會隱藏。 – Benjamin

@本傑明啊，我明白你現在需要什麼。答案已被編輯，jsfiddle已更新。 – shaochuancs

我剛剛得出了與可見性相同的結論：隱藏+大小爲0.您的解決方案也適用。謝謝。 – Benjamin

我已經經歷了同樣的問題，這是拖動預覽快照無論是拖動元素背後鉻

這可以通過添加樣式，迫使拖動元素由瀏覽器被認爲是解決是其自身複合圖層，因此快照僅嘗試在快照期間捕獲該圖層以進行預覽

任何將其傳遞給GPU的CSS轉換規則都可以實現該功能。嘗試添加一個類名到你的可拖動元素中，就可以做到這一點。它不會影響外觀，因此即使不拖動也可以永久添加

.draggable { 
    transform: translateZ(0); 
}

來源

2017-05-17 08:23:39 alechill

幾乎可以工作，但工具提示現在被可拖動對象應該放置的div隱藏。 shaochuancs給出了一個正確的答案 – Benjamin

沒有probs，無論如何這是一個方便的技巧，很高興它解決了 – alechill

用工具提示拖拽

回答

相關問題