javascript - 使用带有 setDragImage 的 Sprite 图像

Question

我正在尝试使用出现在光标后面的自定义拖动图像来实现 HTML5 拖放操作。这可以通过 setDragImage 来完成并且适用于独立图像，即使用 new Image 创建.

但是，为了提高页面加载速度，我想将这些图像合并为一个图像，使用 Sprite 和 background-position把戏。

实现用于 setDragImage 的 Sprite 在拖放功能中，元素可以用作拖动图像这一事实派上了用场:创建 <div> ，设置它的大小和背景图像和位置，并传递 div至 setDragImage .

但是，这些图像似乎必须在 DOM 中可见。当您调用 setDragImage 时，看起来像是制作了该元素的“屏幕截图”使用 DOM 元素，当元素隐藏或不属于 DOM 时，屏幕截图为空，因此拖动时不显示图像。

请看this fiddle .拖动两个文本 div s 适用于拖动图像。但是，点击按钮后隐藏图片div s，拖动文本 div s 不再显示拖动图像。

我只需要让它在 Google Chrome 上运行。

如何在 setDragImage 时通过 HTML5 拖放 ( div ) 使用 sprite 图像是否包含 Sprite 作为背景图像是否隐藏在 DOM 中？或者，是否有另一种将 Sprite 与 setDragImage 结合使用的技术？ ？

Answer 1

如果我是你，我会放弃 sprite 并使用内联 base64 编码图像。如果您只想提高页面加载速度并跳过请求开销，那么它应该可以正常工作，并且您的问题应该得到解决:)