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?
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 🙂