使用精灵图像与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编码图像。如果你只想增加页面加载速度并且跳过请求开销，那么它应该可以正常工作，并且你应该解决问题:)