Unerwartete HTML5 Drag & Drop-Geisterbild-Verhalten

Ich habe den Tag mit einem lustigen Problem verbracht - ich habe einige Leinwände, die ich gerne mit der nativen HTML5-Drag-and-Drop-Funktionalität ziehen würde. Alles funktioniert gut, außer dass ich schließlich festgestellt habe, dass in Chrome 28.0.1500.95 das Standard-Geisterbild der Zeichenfläche nicht angezeigt wird, wenn die Zeichenfläche das Kind eines Inline-Block-DIV ist. Sehen Sie sich diese minimale Arbeitsbeispiel aus:Unerwartete HTML5 Drag & Drop-Geisterbild-Verhalten

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

Ein Geisterbild erscheint, wenn ich versuche zu ziehen ‚Ja drag‘, aber nicht für ‚no drag‘. Wenn ich aber auch ein Drop-Ziel eintrage, kann ich es auslösen, indem ich wie gewohnt "keinen Widerstand" darauf trage, trotz des fehlenden Geistes. Ich würde gerne verstehen, warum das Geisterbild scheinbar auf der Grundlage des CSS des Elternteils verschwindet oder ob hier noch etwas anderes vor sich geht - danke im Voraus!

Quelle

2013-09-03 Bill Mills

Dies könnte nur ein Fehler in Chrome sein (scheint in Firefox zu arbeiten, wenn Sie tatsächlich .setData())

Wenn Sie gerade für eine einfache, wenn auch etwas böse Behelfslösung suchen: .setDragImage() ausdrücklich, basierend auf die Leinwand.

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 (Sie können mit der Position des Bildes ein wenig Geige wollen).

Quelle

2013-09-04 02:38:52 nmaier

Hmmm okay, die Workaround funktioniert, aber nach der allgemeinen Stille zu diesem Thema denke ich, das ist nur ein einfacher alter Bug. Vielen Dank! –

Sag ihnen: http://crbug.com/new Schlimmste, was passieren kann, ist, sie schließen es als ungültig und sagen dir warum und was zu tun ist. ;) – nmaier

Unerwartete HTML5 Drag & Drop-Geisterbild-Verhalten

Antwort

Verwandte Themen