React-dnd: React DnD funktioniert nicht auf Chrome 59

Nicht der Fall; es funktioniert vollkommen in Ordnung. Versuchen Sie, Chrome ohne Erweiterungen auszuführen

@theTechie hast du auf dem Mac unter Windows

Ich habe auf dem Mac nachgesehen. Ist es ein Problem mit einer bestimmten Plattform?

@theTechie Aus irgendeinem Grund lösen React-Dnd 'Dragend' nicht wie gewohnt aus. Ich habe auf mehreren Computern getestet, ein Mac hat das gleiche Problem, alle Windows hat dieses Problem. Jeder Gedanke?

Ich habe auf mehreren Plattformen Windows 8.1 / Windows 7 auf Chrome und auch auf IE 10 und IE 11 getestet. Bei mir funktioniert es einwandfrei.

@hunterbmt - Sehen Sie Fehler in der Konsole? Könnten Sie ein GIF für einen bestimmten Kontext freigeben?

@theTechie Ich habe auf der Beispielseite von
Ich habe es behoben, indem ich 'Dragend' nach 'Drop' manuell ausgelöst habe, wenn der Browser es nach einer Weile nicht ausgelöst hat.
Ich weiß nicht, ob andere auch bei diesem Problem scheitern, wenn dies der Fall ist, könnte ich den Fix in React-dnd verschieben.

Wenn ich mir das Changelog von Chrome 59 anschaue, aber nichts gefunden habe, werde ich mich sehr über den Input freuen.

@hunterbmt Ich denke, es könnte etwas Besonderes an Ihrem Code sein; Sogar ich habe React-dnd in mehreren Fällen verwendet und alle funktionieren unter Chrome 59 einwandfrei.

Warum das so ist, kann ich dir leider nicht sagen. Vielleicht kann ich versuchen, etwas zu finden, wenn es Ihnen gut geht, Ihren Code hier zu teilen.

Ich habe das gleiche Problem in Chrome 59.0.3071.86 unter Windows. Es funktioniert gut in Firefox und funktionierte in früheren Chrome-Versionen gut. package.json:

{
  "dependencies": {
    "react-dnd": "2.1.4",
    "react-dnd-html5-backend": "2.1.2",
  }
}

Das Ergebnis ist das gleiche mit 2.4.0/2.4.1

Gelöst mit diesem Hack:

const ModifiedBackend = (...args) => {
    const instance = new HTML5Backend(...args);

    // Fix Chrome 59 not sending a DragEnd after Drop, which other browsers do and react-dnd expects
    const originalTopDrop = instance.handleTopDrop;
    const originalTopDragEndCapture = instance.handleTopDragEndCapture;
    let dragEndTimeout;
    instance.handleTopDrop = (e, ...args) => {
        dragEndTimeout = setTimeout(() => {
            originalTopDragEndCapture(e, ...args);
        }, 0);
        originalTopDrop(e, ...args);
    };
    instance.handleTopDragEndCapture = (e, ...args) => {
        clearTimeout(dragEndTimeout);
        originalTopDragEndCapture(e, ...args);
    };

    return instance;
};

// Decorate root elements with this
export default DragDropContext(ModifiedBackend);

@awestroke Ich habe am Ende einen ziemlich ähnlichen Hack, aber das Problem tritt immer noch auf, wenn ich schnell in einen nicht abdeckbaren Bereich ziehe und ablege, Chrome nicht "Dragend" auslöst und natürlich auch "Drop" nicht auslöst. Könnten Sie von Ihrer Seite überprüfen?

@hunterbmt Ich habe keine Probleme damit, in nicht absenkbare Bereiche zu fallen. Ich habe nicht überprüft, welche Ereignisse ausgelöst werden, aber React-dnd tritt nicht in einen beschädigten Zustand ein, daher scheint alles gut zu funktionieren.

Ich habe eine PR erstellt, um dieses Problem und potenzielle Probleme zu beheben, indem ich die Bedingung zum Auslösen von endDrag vereinfacht habe
https://github.com/react-dnd/react-dnd/pull/801

Ich habe das gleiche Problem, wenn auch nicht jedes Mal, nur in einigen Fällen, und dieser Fall ist zum Beispiel:
Ich habe ein Widget, das im Drop-Bereich abgelegt werden kann, und dieser Drop-Bereich rendert etwas HTML, wenn das Widget abgelegt wird. Wenn ich das Video-Widget ablegen möchte, wird iframe und es bricht ab und ich kann danach keine anderen Widgets ziehen ( dragend Ereignis wird nicht ausgelöst). Aber wenn ich das iframe durch etwas Text oder Bild ersetze, funktioniert es perfekt und es funktionierte vor Chrome 59 und es funktioniert in jedem anderen Browser, ich kann es nicht herausfinden, liegt das Problem darin? Chrome oder reaktions-dnd?

@rogyvoje Ich glaube, dass Chrome etwas bei der Ereignisauslösung für "Dragend" geändert hat. Ich habe versucht, nach weiteren Informationen zu suchen, aber ich sehe, dass sie das nirgendwo erwähnen.
Übrigens, abhängig von 'mousemove' nach 'dragstart' ist in den meisten Fällen sinnvoller und einfacher als abhängig von 'dragend' und 'mousemove' in einigen Fällen (dragierendes Element aus DOM entfernt) als mein PR.

@hunterbmt danke für die Entmystifizierung
aber wie kann ich Ihre Pull-Anfrage über npm/yarn verwenden? Weil es anscheinend nicht zusammengeführt ist, oder irre ich mich? 😕

@rogyvoje Ich denke, Sie können anstelle der Version einfach direkt auf meinen Zweig verweisen. PR wurde zusammengeführt, aber React-dnd ist noch keine neue Version veröffentlicht, so dass Sie sie nicht direkt von React-dnd npm/yarn erhalten können.

@hunterbmt
Ich habe es so versucht:

npm install git+https://github.com/react-dnd/react-dnd.git#41eb8caa0bc106c9edf0d3ca628b49e70525090b

aber der Anmeldebildschirm wird immer angezeigt 😕

Kann jemand in diesem Thread einen reproduzierbaren Fall des Problems liefern? Ich verwende react-dnd viel, kann aber kein Problem mit Chrome 59 identifizieren, daher bin ich sehr daran interessiert, einen reproduzierbaren Fall zu haben, in dem react-dnd fehlschlägt, weil Chrome 59 nicht ausgelöst wird drag/drop Ereignisse korrekt.

Ich denke, wenn es ein Problem gibt, sollte es von einigen von Ihnen, die das Problem zuerst gesehen haben, sehr leicht reproduzierbar sein https://codesandbox.io/) und versuchen Sie, aussagekräftige Informationen bereitzustellen (wie Betriebssystem, Version von React-dnd usw.). danke!

@bjrmatos hier, ich habe einen gemacht, dieser ist mein Fall und ich hoffe, es wird helfen!

https://github.com/rogyvoje/react-dnd-chrome-59

Getestet auf Chrome 59 und auf dem aktuellen Update:
Version 60.0.3112.78 (offizielles Build) (64-Bit)

Was Windows-Infos angeht:
Betriebssystemname: Microsoft Windows 10 Pro
Betriebssystemversion: 10.0.14393 Nicht zutreffend Build 14393

Getestet auf Chrome: Version 55.0.2883.87 (64-bit) (unter Linux/Mint 18) und funktioniert einwandfrei...

@rogyvoje danke! Ich schaue später nach, mal sehen, ob ich das Problem in meiner Windows 7 VM sehen kann, ansonsten werde ich eine andere VM mit Windows 10 versuchen. Danke!

Hallo @rogyvoje, ich habe dein Repository direkt in der neuesten Chrome-Version ausprobiert, da du sagtest, dass du dort das gleiche Problem hattest (Version 60.0.3112.78 (Official Build) (64-Bit) - Windows 10 PRO) aber ich sehe es nicht irgendein Fehler.

das ist das erwartete ergebnis, oder?

Gibt es noch andere Schritte, um Ihr Problem zu reproduzieren?

Ich habe die Abhängigkeiten mit [email protected] installiert (anstatt yarn ) und nur für das Protokoll sind hier die genauen Versionen der installierten Abhängigkeiten:

HINWEIS: Ich verwende eine Windows 10 PRO VM (da mein Hauptbetriebssystem OSX El Capitan ist, bei dem das Problem mit Chrome nicht besteht)

und das gleiche Ergebnis mit allen meinen Chrome-Erweiterungen deaktiviert:

@rogyvoje Ich habe gerade Ihre früheren Kommentare gelesen und kann das Problem jetzt reproduzieren, wie Sie sagen, das erste Ziehen funktioniert, aber wenn jemand versucht, ein zweites Mal zu ziehen, wird der Fehler Cannot call hover after drop angezeigt.

Danke für das Repository, ich werde versuchen, in das Problem einzutauchen und nach einer Lösung zu suchen, die alle glücklich macht.

scheint der Fehler bestätigt zu sein: https://bugs.chromium.org/p/chromium/issues/detail?id=737691&q=dragend&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS %20Geändert

https://stackoverflow.com/questions/44764343/dragend-event-not-firing-in-chrome-when-an-iframe-is-moved-in-drop-function

Fürs Protokoll kann ich den Fehler mit dem gleichen Beispiel auch in Chrome (60) Mac OS (El Capitan) reproduzieren (nicht sicher, ob er auch in Chrome 59 für Mac vorhanden war), daher schlägt er überall fehl, wenn Chrome verwendet wird (> =59) und bei Verwendung von iframes 😂

@bjrmatos super ,
Ich bin mir nur nicht sicher, was als nächstes passieren wird. Sollten wir auf Chrome 61 warten? 😂

Ich bin mir nur nicht sicher, was als nächstes passieren wird. Sollten wir auf Chrome 61 warten?

Vielleicht versuche ich sowieso einen netten Patch zu finden, der React-dnd in Chrome 59, 60 zum Laufen bringt, also werde ich später hier mehr Updates posten 👍

Ich denke, das löst das Problem. https://github.com/react-dnd/react-dnd/pull/820
Es ist bereits zusammengeführt, aber nicht freigegeben.

Gibt es Neuigkeiten zu diesem Thema?
Ich habe immer noch Probleme mit dem neuesten Chrome...

@ms88privat #820 behebt die Ausnahme, aber nicht das anfängliche Problem, dass in Chrome (ich verwende 67) source.endDrag nie aufgerufen wird, wenn ein iframe gerendert wird.

Vor 3.0 haben wir die von @0rvar bereitgestellte

Sie können es reproduzieren, indem Sie endDrag zu Video.js im Test-Repository von @rogyvoje hinzufügen

const source = {
    beginDrag(props) {
        return {
            renderVideo: true
        };
    },
    // Add end drag
    endDrag(props, monitor) {
        if (!monitor) return;
        // Only gets called when the iframe is already rendered
        console.log("endDrag");
    }
};

Beim ersten Ziehen wird endDrag für Chrome nicht aufgerufen.

es friert auch ein, wenn Sie in iframe in die Seite innerhalb von Chrome (59 bis aktuell) einfügen. @0rvars Fix funktioniert auch in diesem Fall

Dies ist jetzt in Chrome 72 behoben, das gestern veröffentlicht wurde.

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.