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

[Felix Riesterer]

Lieber,

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.

sie hätte aber den Charme, dass das Element seine ursprüngliche Position verlässt und nicht einen Stellvertreter die Animation machen lässt.

Was das Verhalten in Chrome angeht, so weiß ich leider keinen Rat.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

sie hätte aber den Charme, dass das Element seine ursprüngliche Position verlässt und nicht einen Stellvertreter die Animation machen lässt.

Hm, ja, für den beabsichtigten Zweck wäre das vermutlich sogar korrekt.

Verdammt, ich dachte, da komm ich drumherum 😉

Rolf

[JürgenB]

Hallo Rolf

… für den beabsichtigten Zweck wäre das vermutlich sogar korrekt.

was ist denn der beabsichtigte Zweck?

Gruß
Jürgen

[Raketenwilli]

Hallo Rolf

… für den beabsichtigten Zweck wäre das vermutlich sogar korrekt.

was ist denn der beabsichtigte Zweck?

Du meinst letztendlich?

Etwas wie Items einer Klasse zuordnen? Personen einer Gruppe, Karten einem Stapel?

[Rolf B]

Hallo JürgenB,

was ist denn der beabsichtigte Zweck?

eine Kartenhand darzustellen und per Drag+Drop die Karten auf der Hand zu sortieren und auch auszuspielen.

Rolf

[JürgenB]

Hallo Rolf,

im Safari werden die Ziffern aus den darüber liegenden Rechtecken mitgezogen.

Gruß
Jürgen

[Raketenwilli]

im Safari werden die Ziffern aus den darüber liegenden Rechtecken mitgezogen.

Es wäre mindestens nett, wenn Du Nachricht darüber könntest, ob die Variante 1.b das behebt.

Frohes Fest!

[Rolf B]

Hallo Raketenwilli,

1b war eine der Lösungen, die ich selbst schon hatte. Dachte ich. In der Kombi, wie Du es geschrieben hast, allerdings nicht. Nachteil der z-index Lösung ist, dass die Karte damit andere Karten verdeckt, wenn sie aktiv ist, und sie beim Loslassen vorn bleibt, bis eine andere :active wird. Glaube ich.

Ich bin jetzt aber auf dem Weg, den Drag selbst zu bauen. Um, wie Felix anregte, um wirklich die Karte zu ziehen und nicht ein Geisterduplikat von ihr. Könnte beim Sortieren auf der Hand noch etwas mühsam werden was den passenden Drehwinkel während des Ziehens angeht. Mal gucken, hab schon ein paar Ideen.

Frohes Fest!

Danke gleichfalls, und allen anderen auch 😀 🎄🕯️🎅

Rolf

[Raketenwilli]

Nachteil der z-index Lösung ist, dass die Karte damit andere Karten verdeckt, wenn sie aktiv ist, und sie beim Loslassen vorn bleibt, bis eine andere :active wird. Glaube ich.

Nö. Nicht in meinem Test. <8-)>>>

Jetzt beginnt das große Fressen: Weihnachten, Leute!

[Raketenwilli]

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

Eigentlich hast Du die Antwort schon selbst herausgefunden.

1.a) Den Pseudo-Transform vor den speziellen Regeln pauschal für alle „draggablen“ machen

*[draggable=true] {
   transform: rotate(0deg);
}

1.b) Variante: Das angeklickte Element nach vorn zu holen sorgt dafür, dass das von Chromium bei Verschieben gezeigte „Bildschirmfoto“ keine „Fremdinhalte“ zeigt:

*[draggable=true]:active {
   z-index:99999;
}

Du kannst noch Klassen einbauen wenn Du nicht willst, das der Browser eine Stunde lang damit befasst ist, einer Quantillion von Objekten die Eigenschaften zuzuweisen und diese zu überwachen…

Ich hoffe, das stimmt so. Im Fiddle hat es „getan“. Ob das wohl Gunnar genügt?

2.) Als Bug verpetzen. https://support.google.com/chrome/answer/95315

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.

Ich sehe davon in Chrome - Version 109.0.5414.10 (Entwickler-Build) Ubuntu 22.04 (64-Bit) - nichts. Und das obwohl ich den Bereich fast auf Full-HD aufgezogen habe. Allerdings haben die Objekte beim Verschieben einen sehr breiten, durchscheinenden Rand. Womöglich soll das aber so sein.

Frohes Fest!

[T-Rex]

Auch wenn es euch wahrscheinlich nicht gefällt, aber jquery kann exakt dies: https://jqueryui.com/draggable/