予期せぬHTML5ドラッグアンドドロップのゴースト画像の振る舞い

面白い問題を抱えていました。ネイティブのHTML5ドラッグ＆ドロップ機能を使用してドラッグしたいキャンバスがいくつかあります。 Chrome 28.0.1500.95では、キャンバスがインラインブロックdivの子である場合、キャンバスのデフォルトのゴースト画像は表示されません。予期せぬHTML5ドラッグアンドドロップのゴースト画像の振る舞い

<html> 
    <body> 
     <div style='display:inline-block'> 
      <canvas id='canvas1' width='100px' height='100px' draggable='true'></canvas> 
     </div> 

     <div> 
      <canvas id='canvas2' width='100px' height='100px' draggable='true'></canvas> 
     </div> 

     <script type="text/JavaScript"> 
      var canvas1, canvas2, context1, context2; 

      canvas1 = document.getElementById('canvas1'); 
      context1 = canvas1.getContext('2d'); 

      canvas2 = document.getElementById('canvas2'); 
      context2 = canvas2.getContext('2d'); 

      context1.fillText('no drag', 10, 30); 
      context2.fillText('yes drag', 10, 30); 
     </script> 
    </body> 
</html>

「ドラッグする」をドラッグしようとするとゴースト画像が表示されますが、「ドラッグしない」とは表示されません。しかし、ドロップターゲットにもスティックしていると、幽霊がいなくても、ノーマルと同じように「ドラッグしない」ようにトリガーすることができます。私は親のCSSに基づいて明らかにゴーストイメージが消える理由を理解したい、または何か他のことが起こっている場合は、事前に感謝します。

出典

2013-09-03 Bill Mills

あなただけやや厄介な回避策はいえ、簡単に探しているならこれはChromeのバグだけで（もし実際に.setData()たら、Firefoxで動作しているようです）

かもしれません：明示的.setDragImage()に基づき、キャンバス。

function dragstart(e) { 
    var di = new Image(); 
    di.src = this.toDataURL("image/png"); 
    e.dataTransfer.setDragImage(di, 10, 10); 
    // Run in firefox 
    e.dataTransfer.setData("text/plain", this.id); 
}

Fiddle（画像の位置をちょっと調べてみてください）。

出典

2013-09-04 02:38:52 nmaier

Hmmm大丈夫ですが、回避策は機能しますが、このトピックの一般的な沈黙によって判断すると、これは単なる古いバグです。ありがとう！ –

彼らに教えてください：http://crbug.com/new起こる可能性が最も低いのは、彼らが無効なものとして閉じて、なぜ、何をすべきかを教えてくれることです。 ;） – nmaier

予期せぬHTML5ドラッグアンドドロップのゴースト画像の振る舞い

答えて

関連する問題