setDragImageでスプライトイメージを使用する

Question

カーソルの後ろに表示されるカスタムドラッグイメージでHTML5ドラッグアンドドロップを実装しようとしています。これはsetDragImageで行うことができ、スタンドアロンイメージではうまく機能します（new Imageで作成）。

しかし、ページの読み込み速度を向上させるために、これらの画像をスプライトとbackground-positionトリックを使用して1つの画像に結合したいと考えています。

ドラッグのsetDragImageに使用するスプライトを実装した機能を削除するには、要素はドラッグイメージとして使用することができるという事実が便利になります：<div>を作成し、その大きさと背景画像と位置を設定し、それを渡すdiv 〜setDragImage。

ただし、これらの画像はDOM内に表示されている必要があります。 setDragImageをDOM要素で呼び出すと、要素の「スクリーンショット」が作成され、要素が非表示になっているかDOMの一部でない場合、スクリーンショットは空で、結果としてドラッグ時に画像は表示されません。

this fiddleをご覧ください。 2つのテキストdivをドラッグすると、ドラッグイメージが正常に動作します。ただし、画像divを非表示にするボタンをクリックした後で、テキストdivをドラッグしてもドラッグ画像が表示されなくなります。

これはGoogle Chromeでのみ動作する必要があります。

スプライトを背景イメージとして含むdivがDOMに隠されているかどうかにかかわらず、HTML5ドラッグアンドドロップ（setDragImage）でスプライトイメージを使用するにはどうすればよいですか？または、setDragImageでスプライトを使用する別のテクニックがありますか？

Answer 1

私があなただったら、スプライトをドロップして、インラインbase64でエンコードされた画像を使用します。あなたがしたいのは、ページの読み込み速度を上げてリクエストのオーバーヘッドをスキップするだけの場合は、問題なく解決するはずです。