通过 setDragImage 使用精灵图像
我正在尝试使用出现在光标后面的自定义拖动图像来实现 HTML5 拖放。这可以通过 setDragImage 来完成，并且可以很好地处理独立图像，即使用 new Image 创建的图像。
但是，为了提高页面加载速度，我想使用精灵和背景位置技巧将这些图像合并为一张图像。
要实现在拖放功能的 setDragImage 中使用精灵，元素可以用作拖动图像这一事实会派上用场：创建一个
div 传递给 setDragImage。然而，这些图像似乎必须在 DOM 中可见。当您使用 DOM 元素调用 setDragImage 时，看起来就像是元素的“屏幕截图”，并且当该元素隐藏或不是 DOM 的一部分时，屏幕截图是空的，并且作为结果拖动时不显示图像。
请看看这个小提琴。拖动两个文本 div 可以很好地配合拖动图像。但是，单击按钮隐藏图像 div 后，拖动文本 div 不会再显示拖动图像。
我只需要在 Google Chrome 上运行即可。
当包含精灵作为背景图像的 div 隐藏或不在 DOM 中时，如何通过 HTML5 拖放 (setDragImage) 使用精灵图像？或者，是否有另一种将精灵与 setDragImage 结合使用的技术？
I'm trying to implement HTML5 Drag and Drop with a custom drag image, which appears behind the cursor. This can be done with setDragImage and works great with standalone images, i.e. created with new Image.
However, to improve page loading speed, I'd like to combine those images into one image, using sprites and the background-position trick.
To implement sprites for use in setDragImage of the drag and drop functionality, the fact that elements can be used as a drag image comes in handy: create a <div>, set its size and background image and position, and pass that div to setDragImage.
However, it appears that those images must be visible in the DOM. It looks like a "screenshot" of the element is made when you call setDragImage with a DOM element, and when the element is either hidden or not part of the DOM, the screenshot is empty, and as a result no image is shown when dragging.
Please have a look at this fiddle. Dragging the two text divs works fine with the drag image. However, after clicking the button to hide the image divs, dragging the text divs does not make the drag image show up anymore.
I only need to have this working on Google Chrome.
How can I use sprite images with HTML5 Drag and Drop (setDragImage) while the divs containing the sprites as background images are hidden or not in the DOM? Or, is there another technique of using sprites with setDragImage?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果我是你，我会放弃精灵并使用内联 Base64 编码图像。如果您只想提高页面加载速度并跳过请求开销，那么它应该可以正常工作，并且您的问题应该得到解决:)
If i was you i'd drop the sprite and use inline base64 encoded images. If all you wish to do is increase page load speed and skip the request overhead, then it should work just as fine, and you problem should be solved :)