使用精靈圖像與setDragImage

Question

我想實現HTML5拖放與自定義拖動圖像，它出現在光標後面。這可以使用setDragImage完成，並且可以與獨立圖像很好地協作，即使用new Image創建。

但是，爲了提高頁面加載速度，我想將這些圖像合併爲一個圖像，使用精靈和background-position技巧。

若要實現使用精靈在拖拽的setDragImage和拖放功能，該元件可被用作拖動圖像的事實派上用場：創建一個<div>，設置其大小和背景圖像和位置，並傳遞div到setDragImage。

但是，看起來這些圖像必須在DOM中可見。當您使用DOM元素調用setDragImage時，元素被隱藏或不是DOM的一部分時，它看起來像元素的「屏幕截圖」，因此屏幕截圖爲空，因此在拖動時不會顯示圖像。請致電this fiddle。拖動兩個文本div s可以很好地與拖動圖像一起工作。但是，單擊按鈕隱藏圖像div s後，拖動文本div s不會使拖動圖像再次顯示。

我只需要在Google Chrome上使用此工具。

如何使用包含HTML5拖放的精靈圖像（setDragImage）而將包含精靈作爲背景圖像的div隱藏或不包含在DOM中？或者，還有另一種使用精靈與setDragImage的技術？

Answer 1

如果我是你，我會放棄精靈並使用內聯base64編碼圖像。如果你只想增加頁面加載速度並且跳過請求開銷，那麼它應該可以正常工作，並且你應該解決問題:)