React-dnd: Probleme mit Eingaben und Textbereichen innerhalb der ziehbaren Komponente

Dies wird durch die Registrierung des Ereignisses selectstart , das anscheinend nur für die IE-Kompatibilität benötigt wird.
Wenn Sie wie ich keine IE-Kompatibilität benötigen, ist hier meine schnelle Lösung, die für Sie möglicherweise funktioniert:
https://github.com/dperetti/react-dnd/commit/06f74ef97e07a9a24c10eab8593f3e2121d4f2ed

Danke für die Berichterstattung! Ich bin froh, eine PR zu akzeptieren, die dies behebt.

Ich habe zwei Anforderungen:

• Es muss noch diesen IE-Fix haben.
• Bitte überprüfen Sie, ob preventDefault() für die anderen Browser benötigt wird. Ich denke, es verhindert die Textauswahl von allem, was Sie zu ziehen versucht haben. Wenn dies tatsächlich dazu beiträgt, unerwünschte Auswahl in anderen Browsern zu verhindern, sollten Sie e.preventDefault() mit einem Scheck a la e.target.tagName !== 'input' (aber einem intelligenteren) umgeben.

Gleicher Fehler mit <div contentEditable={isEditing} /> .
Ich kann es auch nicht bearbeiten. Ctrl+A und Shift + Arrows funktionieren nicht.

In den nächsten drei Wochen werde ich beschäftigt sein und ich habe keine Zeit, dies zu beheben.
Wie gesagt, ich akzeptiere gerne eine PR mit einem Fix wie unter https://github.com/gaearon/react-dnd/issues/178#issuecomment -108110202 beschrieben.

Ich habe das untersucht. Wenn ich den gesamten Körper der handleSelectStart -Funktion auskommentiere , funktioniert alles wie erwartet. Habe dies in IE11 getestet und scheint auch dort gut zu sein.

@gaearon Weißt du, ob es einen bestimmten Anwendungsfall oder ein bestimmtes Setup gibt, warum das Ereignis überhaupt behandelt werden muss? IE10? Unterschiedliches Setup von textarea / input in einem ziehbaren Knoten? Ich bekomme keine Probleme mit der Textauswahl und frage mich, ob CSS user-select dies bei Bedarf um preventDefault umgeht.

Die ursprüngliche Ausgabe war https://github.com/gaearon/react-dnd/issues/128.
Wenn Sie eine PR vorbereiten können, die das Problem behebt, aber auch https://github.com/gaearon/react-dnd/issues/128 funktioniert, wäre dies eine große Hilfe.

Mal sehen, ob ich mich darum kümmern kann. Sie müssen einen Weg finden, um einen einfachen Testfall für IE9 einzurichten.

Ich denke, sortable-simple Beispiel ist auf IE9 fehlgeschlagen, bevor # 128 behoben wurde.

@gaearon Ja, das war ein gutes Beispiel, danke. Ein paar Anmerkungen:

1. Kein anderer Browser (getestet mit Chrome, Safari, FF und IE 11) scheint sich darum zu kümmern. Die Veranstaltung muss überhaupt nicht behandelt werden.
2. IE9 scheint nur den Aufruf e.target.dragDrop() zu benötigen. Das Deaktivieren der Textauswahl kann erfolgen, indem ein Handle erstellt wird, das die gesamte ziehbare Datei abdeckt, wobei der ziehbare Knoten in connectDragPreview und das Handle in connectDragSource . Dies mag zwar unangenehm klingen, aber AFAIK, Sie unterstützen IE9 nicht offiziell. Ist dies eine vernünftige Problemumgehung, insbesondere wenn andere Probleme in diesem Browser wahrscheinlich auftreten?
3. Punkt Nummer zwei ist ohnehin auch dann nützlich, wenn Sie eine Texteingabe in der Drag-Datei haben. Benutzer können keinen Text durch Ziehen ihrer Mäuse auswählen, wenn connectDragSource auf den gesamten Knoten angewendet wird (am Ende wird der Knoten gezogen, anstatt Text auszuwählen), jedoch auf ein unsichtbares Handle angewendet, das die Größe des gesamten Knotens hat funktioniert sehr gut.

Unsicher, wie Sie damit umgehen möchten. Ohne auf UA-Überprüfungen zurückzugreifen, weiß ich nicht, dass es eine großartige Möglichkeit gibt, damit umzugehen, und es scheint mir, als würde es Funktionen hinzufügen, um einen inoffiziell unterstützten Browser zu unterstützen, der gute Browser kaputt macht und möglicherweise eine Wartungslücke gräbt. Aber das ist alles meine Meinung. Unabhängig davon gibt es eine Problemumgehung für dieses Problem, die auch andere Probleme löst.

Durch Entfernen des Ereignis-Listeners für selectstart funktioniert contentEditable in Chrome, in Safari funktioniert dies jedoch nicht.

Behoben durch https://github.com/gaearon/react-dnd/commit/0a36033693868a7985ea2348105da4fb2cef8a00.

Durch das Entfernen des Ereignis-Listeners für selectstart funktioniert contentEditable in Chrome, in Safari jedoch nicht.

Dies ist ein Problem mit der Drag & Drop-API von HTML5 in Safari. Wir können nichts dagegen tun.

Das Update für dieses Problem wurde in [email protected] .
Bitte überprüfen Sie, ob es funktioniert.

Bestätigt, dass Strg / Cmd-A in <input> in einer ziehbaren Komponente funktioniert.

Wenn Sie versuchen, Eingabe- oder Textbereichsinhalte mit dem Touchpad / der Maus auszuwählen, wird das übergeordnete Element gezogen

Ich sehe, dass dies nicht behoben ist, ein neues Problem erstellen?

Elemente mit contentEditable in einem ziehbaren übergeordneten Container erlauben mir nicht, Text auszuwählen oder in irgendeiner Weise mit ihnen zu interagieren. Nach einigem Graben fand ich diesen Fehlerbericht: https://bugs.chromium.org/p/chromium/issues/detail?id=170139

Es scheint, dass Chrome das Problem inzwischen behoben hat. Das Verhalten von Safari kann in der Zwischenzeit mit CSS behoben werden:

.contenteditable-element {
  user-select: text;
}

@trevorsmith Dies

@ rahul1995 - Ich habe gerade eine Lösung gefunden: Speichern Sie einfach einen Verweis auf dem ziehbaren DOM-Knoten und setzen Sie das ziehbare Attribut auf false wenn der Benutzer die Eingabe / den Textbereich fokussiert:

const Test = () => {
  const ref = useRef(null);
  const [focused, setFocused] = useState(false);
  const [_, drag] = useDrag({ item: { type: 'test' } });

  useEffect(() => {
    if (ref.current) {
      ref.current.setAttribute('draggable', !focused);
    }
  }, [focused]);

  return drag(
    <textarea ref={ref} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}></textarea>
  );
};

Dies sollte den Trick für Firefox tun: zwinker: