Beklenmeyen HTML5 sürükle ve bırak hayalet görüntü davranışı

Günümü eğlenceli bir sorunla geçirdim - yerel HTML5 sürükle ve bırak işlevini kullanarak etrafta sürüklemek istediğim bazı tuvaller var. Her şey harika çalışıyor, ancak en sonunda, 28.0.1500.95 sürümünde, tuvalin satır içi satırın alt öğesi olması durumunda, tuvalin varsayılan hayalet görüntüsünün görünmediğini fark ettim. Bu minimal çalışma örneği inceleyin:Beklenmeyen HTML5 sürükle ve bırak hayalet görüntü davranışı

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

Bir hayalet görüntü belirir ben değil 'hayır sürükle' için 'evet sürükle' sürüklemeye çalışırken. Bununla birlikte, eğer bir düşme hedefine yapışırsam, yok olan hayalete rağmen, normalde olduğu gibi üzerine 'sürükle' bırakarak onu tetikleyebilirim. Hayalet görüntünün neden ebeveynin CSS'sine bağlı olarak kaybolduğunu ya da başka bir şey olup olmadığını anlamak istiyorum - şimdiden teşekkürler!

kaynak

2013-09-03 Bill Mills

Bu olabilir sadece Chrome'da bir hata

sadece biraz pis-geçici de olsa kolay arıyorsanız (aslında .setData() kez, Firefox çalışmaya görünüyor) be: .setDragImage() açıkça dayalı tuval.

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 (görüntünün biraz pozisyonuna ile keman isteyebilirsiniz).

kaynak

2013-09-04 02:38:52 nmaier

Hmmm tamam, geçici çözüm işe yaramıyor, ama bu konudaki genel sessizlikten yola çıkarak sanırım bu sadece eski bir böcek. Teşekkürler! –

Onlara söyleyin: http://crbug.com/new Olabilir En kötüsü, geçersiz olarak kapatırlar ve neden ve ne yapmaları gerektiğini söylerler. ;) – nmaier

Beklenmeyen HTML5 sürükle ve bırak hayalet görüntü davranışı

cevap

İlgili konular