Wie bringe ich Chrome Manieren beim Drag bei?

[Rolf B]

Hallo alle,

das als problematisch verlinkte Fiddle soll das Problem illustrieren.

Öffnet man es mit Chrome (v108.0.5359.125 unter Win10), zeigen sich bei mir ein paar Merkwürdigkeiten:

• der Drag von Rechteck 4 ist wie erwartet, ob mit oder ohne Transform
• der Drag von Rechteck 1 ist es ebenfalls, trotz Dummy-Transform
• der Drag von Rechteck 2 ist kaputt, hier habe ich keinen Transform notiert und Chrome zeigt nicht das div 2, sondern den Bildschirmausschnitt des Bereichs, wo div 2 lag
• Rechteck 3 enthält einen Transform. Der Drag zeigt das korrekte Rechteck ohne Artefakte von Rechteck 4, ABER Chrome macht bei mir eine Art radialen Transparenzgradienten auf das Drag-Bild. Da wo die Maus beim Dragstart war, ist das Element voll sichtbar, je weiter weg davon, desto transparenter wird es. Das Rechteck 4 ist kleiner, da bringt er den Transparenzgradienten nicht.

Hinzu kommt, dass Chrome für das Drag-Image die Rotation des Elements aufhebt.

Im Firefox hat er immerhin die Artefakte nicht und behält auch die Rotation bei, aber das Rechteck 3 bekommt ebenfalls den Transparenzgradienten.

Muss ich damit leben? Oder gibt's irgendwelche Schalter, mit denen man das Verhalten steuern kann?

Mit dem Entfernen der Rotation in Chrome könnte ich leben.

Die Artefakte in Chrome kann ich umgehen, indem ich per :hover Pseudoklasse dem Element, über dem die Maus ist, einen z-index gebe und es nach vorn hole. Das ist aber nicht toll, weil das dazu führen kann, dass das Nachbarelement komplett verdeckt ist. Nicht im Fiddle, aber im realen Anwendungsfall.

Was ich definitiv vermeiden will, wäre ein Hintergrund-Canvas, auf den ich das Element heimlich zeichne, eine Data-URL daraus erzeuge und damit ein Image erzeuge, das ich dann per setDragImage für die Drag-Operation vorgebe.

Was ich auch nicht will, ist ein statisches Drag-Bild. Das Drag-Bild soll den Inhalt des gezogenen Elements repräsentieren.

Was muss ich tun, um das richtig hinzubekommen? Wie bekomme ich es hin, dass das Drag-Image ein ordentliches Abbild des gezogenen Elements ist? Ich könnte natürlich auf das Drag+Drop API verzichten und den Drag per top/left und JavaScript nachbilden. Aber - äh - das wäre die übelste Option.

Rolf