Ziehen und Ablegen bei HTML-Elementen deaktivieren?

Question

Ich arbeite an einer Webanwendung, für die ich versuche, ein vollwertiges Fenstersystem zu implementieren. Im Moment läuft es sehr gut, ich bin nur in ein kleines Problem laufen. Manchmal, wenn ich einen Teil meiner Anwendung ziehen will (meistens die Ecke meines Fensters, die eine Größenänderung auslösen soll), wird der Webbrowser schlau und denkt, ich wolle etwas ziehen und ablegen. Das Endergebnis ist, dass meine Aktion auf Eis gelegt wird, während der Browser seine Drag-and-Drop-Funktion ausführt.

Gibt es eine einfache Möglichkeit, die Drag&Drop-Funktion des Browsers zu deaktivieren? Im Idealfall möchte ich es ausschalten können, während der Benutzer auf bestimmte Elemente klickt, aber es wieder aktivieren, so dass die Benutzer immer noch ihre normale Funktionalität des Browsers auf den Inhalt meines Windows verwenden können. Ich verwende jQuery, und obwohl ich nicht in der Lage war, es zu finden, die Dokumente durchsuchen, wenn Sie eine reine jQuery-Lösung kennen, wäre es ausgezeichnet.

Kurz gesagt: Ich muss die Textauswahl und die Drag-and-Drop-Funktionen des Browsers deaktivieren, solange der Benutzer die Maustaste gedrückt hält, und diese Funktionen wiederherstellen, wenn der Benutzer die Maus loslässt.

Answer 1

Dies ist eine Spielerei, die ich immer bei meinen Webanwendungen verwende:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

Dadurch wird verhindert, dass irgendetwas in Ihrer App gezogen und fallen gelassen wird. Je nach Bedarf der Tour können Sie Folgendes ersetzen Körper Selektor mit jedem Container, der nicht von Kindern gezogen werden soll.

Answer 2

Ich werde es einfach hier lassen. Hat mir geholfen, nachdem ich alles versucht habe.

   $(document.body).bind("dragover", function(e) {
        e.preventDefault();
        return false;
   });

   $(document.body).bind("drop", function(e){
        e.preventDefault();
        return false;
   });

Answer 3

Versuchen Sie dies

$('#id').on('mousedown', function(event){
    event.preventDefault();
}

Answer 4

Für input Elemente, diese Antwort funktioniert für mich.

Ich habe es auf eine benutzerdefinierte Eingabe-Komponente in Angular 4 implementiert, aber ich denke, es könnte mit reinen JS implementiert werden.

HTML

<input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)" 
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/>

Definition einer Komponente (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

  disableEvent(event) {
    event.preventDefault();
    return false;
  }
}

Answer 5

Unter Verwendung der Antwort von @SyntaxError, https://stackoverflow.com/a/13745199/5134043

Ich habe es geschafft, dies in React zu tun; der einzige Weg, den ich herausfinden konnte, war, die ondragstart- und ondrop-Methoden an ein ref anzuhängen, wie so:

  const panelManagerBody = React.createRef<HTMLDivElement>();
  useEffect(() => {
    if (panelManagerBody.current) {
      panelManagerBody.current.ondragstart = () => false;
      panelManagerBody.current.ondrop = () => false;
    }
  }, [panelManagerBody]);

  return (
    <div ref={panelManagerBody}>