Drag-and-Drop-Problem in Chrome im Zusammenhang mit Windows-Skalierung (125 %)
Lesezeit: 4 Minuten
irreführend
Ich habe ein Problem mit Drag & Drop in Chrome (v69.0.3497.100). Insbesondere werden einige der Drag & Drop-Ereignisse ausgelöst, wenn die Windows-Skalierung nicht 100 % beträgt, obwohl sie nicht ausgelöst werden sollten.
Kasse Stackblitz Beispiel, und versuchen Sie, das “blaue” Rechteck über sich selbst zu ziehen (einfach ziehen, ein wenig nach unten bewegen und loslassen). Wenn die Windows-Skalierung auf 100 % eingestellt ist (der Browser-Zoom ist ebenfalls 100 %), wird ein Ereignis ausgelöst (dragEnter) wie erwartet (überprüfen Sie die Konsole). Wenn die Windows-Skalierung jedoch auf 125 % eingestellt ist (aber der Browser-Zoom ist immer noch 100 %), werden drei Ereignisse ausgelöst (zwei dragEnter und ein dragLeave), und ich habe erwartet, dass nur ein Ereignis ausgelöst wird, da das Element per Drag & Drop auf sich selbst gezogen wurde (wie es bei 100 % Skalierung der Fall war).
Es könnte sein, dass, da dies der Windows-Zoom (und nicht der Browser-Zoom) ist, das linke (“hellrote”) Rechteck größer ist, als es angezeigt wird, und es geht unter das rechte Rechteck, und Ereignisse werden an es weitergegeben, obwohl ich das nicht beweisen konnte da alle Elemente im Inspektor die richtige Größe haben.
Dies scheint im neuesten Firefox, IE oder Edge nicht zu passieren.
Weiß jemand, warum das passiert und wie man es beheben kann?
Das Hinzufügen von „console.log(event.target.className)“ in Ihren Ereignishandlern macht es möglicherweise einfacher zu sehen, was vor sich geht. Ich sehe mehrere Ereignisse, die bei jeder Skalierung in Chromium 69 ausgelöst werden.
– Lonnie Best
20. September 2018 um 6:30 Uhr
Das Ursprungselement sollte die Dragstart- und Dragend-Handler auslösen. Und das Zielelement sollte die Dragover- und Drop-Handler auslösen. Mein Rat an Sie ist, Drag & Drop in eine Richtung erfolgreich zu machen, bevor Sie bidirektionales Drag & Drop in Angriff nehmen.
– Lonnie Best
20. September 2018 um 6:40 Uhr
Hallo, vielen Dank für Ihre Kommentare, Hinzufügen className bestätigt, dass Ereignisse falsch ausgelöst werden (aber das habe ich irgendwie schon erraten 🙂 ). Ich verwende Chromium nicht, aber dies ist ein einfaches Layout und mehrere Ereignisse sollten nicht ausgelöst werden, finden Sie nicht? Ich habe den zweiten Kommentar nicht verstanden, ich weiß, welche Ereignisse beim Drag & Drop ausgelöst werden, und ich habe eine Einwegfunktion, aber ich brauche diese bidirektionale Funktion auch … Vielleicht könnten Sie klarstellen, was Sie meinten durch diesen Kommentar? Nochmals vielen Dank für Ihr Interesse, jeder Kommentar oder jede Hilfe ist willkommen, ich stecke jetzt seit ein paar Tagen daran fest und werde verrückt. 😀
– irreführend
20. September 2018 um 8:38 Uhr
Das Ziehen des blauen Div ruft das Drop-Ereignis des 1. Div auf. Wir können die Breite in px (: Host) angeben. Es funktioniert für die ersten Drag-Ereignisse auf dem blauen Div, aber nicht rekursiv
– T. Shashwat
25. September 2018 um 11:25 Uhr
Danke für Ihre Antwort. Ich tat console.log für Drop-Events und keines der drop Veranstaltungen für links (hellrotes) Rechteck entsteht, wenn wir ziehen Rechts (blaues) Rechteck. Stellen Sie außerdem die feste Breite ein :host entspricht nicht meinen Anforderungen, also geht das nicht.
– irreführend
25. September 2018 um 12:52 Uhr
Je mehr ich mir dieses Problem ansehe, desto mehr scheint es das Chromium-Problem zu sein. Vor einigen Tagen habe ich eine Frage gepostet, dann wollte ich ein Kopfgeld dafür einrichten, und dann habe ich Ihre gefunden, und ich glaube, sie hängen zusammen: Subpixel-Scroll-Problem, kann ScrollTop auf Chrome 69 nicht richtig einstellen.
Es gibt einige Fehlerberichte im Chromium Issue Tracker, die sich auf das Problem der Skalierungsrundung beziehen: Verbindung 1, Verknüpfung 2… Ich habe auch meinen eigenen Fehler erstellt: Verknüpfung 3. Es sollte mehr Informationen geben, aber die Recherche dauert zu lange. Ich denke, wir könnten unsere Bemühungen bündeln und mehr Aufmerksamkeit auf das Problem lenken und ihnen beispielsweise bei der Klärung und Priorisierung helfen, wenn Chrom dafür verantwortlich ist.
Ich habe das gleiche Problem mit Version 76.0.3809.100 (64-Bit).
Und ich versetze das Bild, um den seltsamen Versatz zu kompensieren, den ich auch in Ihrem Stackbliz-Beispiel bekomme.
Aber bei einer Skalierung von 200% muss ich meinen berechneten DragImage-Offset mit 4 multiplizieren !!!
Bei 300% ist es bei 9
Bei 350 % ist es 12:25 Uhr
Siehst du das Muster ???!
Ich habe Angst vor meinem Hack/Fix für dieses Problem. Ich bin mir nicht sicher, ob es nur auf Windows oder nur auf dem Desktop liegt. Aber jetzt denke ich, dass ich window.devicePixelRatio^2 machen muss, damit ich meine Arbeit fortsetzen kann.
Es gibt Fälle, in denen eine Website über Drag-and-Drop-Funktionen verfügt, die im Google Chrome-Browser nicht funktionieren.
Beheben von Drag-and-Drop
Geben Sie Folgendes in die obere Suchleiste von Google Chrome ein. Chrome-Flags: chrome://flags/
Typ Touch in die Suchleiste und stellen Sie die folgenden Optionen ein Enabled.
14370000cookie-checkDrag-and-Drop-Problem in Chrome im Zusammenhang mit Windows-Skalierung (125 %)yes
Das Hinzufügen von „console.log(event.target.className)“ in Ihren Ereignishandlern macht es möglicherweise einfacher zu sehen, was vor sich geht. Ich sehe mehrere Ereignisse, die bei jeder Skalierung in Chromium 69 ausgelöst werden.
– Lonnie Best
20. September 2018 um 6:30 Uhr
Das Ursprungselement sollte die Dragstart- und Dragend-Handler auslösen. Und das Zielelement sollte die Dragover- und Drop-Handler auslösen. Mein Rat an Sie ist, Drag & Drop in eine Richtung erfolgreich zu machen, bevor Sie bidirektionales Drag & Drop in Angriff nehmen.
– Lonnie Best
20. September 2018 um 6:40 Uhr
Hallo, vielen Dank für Ihre Kommentare, Hinzufügen
classNamebestätigt, dass Ereignisse falsch ausgelöst werden (aber das habe ich irgendwie schon erraten 🙂 ). Ich verwende Chromium nicht, aber dies ist ein einfaches Layout und mehrere Ereignisse sollten nicht ausgelöst werden, finden Sie nicht? Ich habe den zweiten Kommentar nicht verstanden, ich weiß, welche Ereignisse beim Drag & Drop ausgelöst werden, und ich habe eine Einwegfunktion, aber ich brauche diese bidirektionale Funktion auch … Vielleicht könnten Sie klarstellen, was Sie meinten durch diesen Kommentar? Nochmals vielen Dank für Ihr Interesse, jeder Kommentar oder jede Hilfe ist willkommen, ich stecke jetzt seit ein paar Tagen daran fest und werde verrückt. 😀– irreführend
20. September 2018 um 8:38 Uhr
Das Ziehen des blauen Div ruft das Drop-Ereignis des 1. Div auf. Wir können die Breite in px (: Host) angeben. Es funktioniert für die ersten Drag-Ereignisse auf dem blauen Div, aber nicht rekursiv
– T. Shashwat
25. September 2018 um 11:25 Uhr
Danke für Ihre Antwort. Ich tat
console.logfür Drop-Events und keines derdropVeranstaltungen für links (hellrotes) Rechteck entsteht, wenn wir ziehen Rechts (blaues) Rechteck. Stellen Sie außerdem die feste Breite ein:hostentspricht nicht meinen Anforderungen, also geht das nicht.– irreführend
25. September 2018 um 12:52 Uhr