使用带有 setDragImage 的精灵图像答案

【问题标题】：Using sprite images with setDragImage使用带有 setDragImage 的精灵图像
【发布时间】：2011-09-25 12:18:29
【问题描述】：

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

但是，为了提高页面加载速度，我想使用精灵和background-position 技巧将这些图像组合成一张图像。

要实现在拖放功能的setDragImage 中使用的精灵，可以将元素用作拖放图像这一事实会派上用场：创建<div>，设置其大小和背景图像以及位置，然后将div 传递给setDragImage。

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

请查看this fiddle。拖动两个文本 divs 与拖动图像配合得很好。但是，在单击按钮隐藏图像divs 后，拖动文本divs 并不会再显示拖动图像。

我只需要在谷歌浏览器上运行它。

当包含作为背景图像的精灵的divs 在 DOM 中隐藏或不隐藏时，如何通过 HTML5 拖放 (setDragImage) 使用精灵图像？或者，是否有另一种使用 setDragImage 的精灵的技术？

【问题讨论】：

【解决方案1】：

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

【讨论】：

内联 base64 图像让我想到使用 <canvas>（drawImage 和 toDataURL）裁剪部分 sprite 图像，并将生成的 toDataURL 的 base64 传递给 new Image。效果很好，谢谢！