Drag & Drop für HTML-Elemente deaktivieren?

108

Ich arbeite an einer Webanwendung, für die ich versuche, ein voll funktionsfähiges Fenstersystem zu implementieren. Im Moment läuft es sehr gut, ich stoße nur auf ein kleines Problem. Manchmal, wenn ich einen Teil meiner Anwendung ziehe (meistens den Eckbereich meines Fensters, der einen Größenänderungsvorgang auslösen soll), wird der Webbrowser clever und denkt, ich möchte etwas ziehen und ablegen. Im Endergebnis wird meine Aktion angehalten, während der Browser das Ziehen und Ablegen ausführt.

Gibt es eine einfache Möglichkeit, das Drag & Drop des Browsers zu deaktivieren? Ich möchte es idealerweise deaktivieren können, während der Benutzer auf bestimmte Elemente klickt, es aber wieder aktivieren, damit Benutzer weiterhin die normalen Funktionen ihres Browsers für den Inhalt meiner Fenster verwenden können. Ich verwende jQuery, und obwohl ich es nicht in den Dokumenten finden konnte, wäre es ausgezeichnet, wenn Sie eine reine jQuery-Lösung kennen.

Kurz gesagt: Ich muss die Browsertextauswahl und Drag & Drop-Funktionen deaktivieren, während mein Benutzer die Maustaste gedrückt hält, und diese Funktionalität wiederherstellen, wenn der Benutzer die Maus loslässt.

— Nicholas Flynt
quelle

2

Ich würde dafür werben, dass die Antwort von @ SyntaxError (unten 100+ Stimmen) die ausgewählte Antwort sein sollte, da sie keine Auswirkungen auf Nicht-Drag-Vorgänge hat.

— Shaun Wilson

78

Versuchen Sie, die Standardeinstellung für das Mousedown-Ereignis zu verhindern:

<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>

oder

<div onmousedown="return false">asd</div>

— Sergey Ilinsky
quelle

2

+1 - Dies hat jedoch den unglücklichen Nebeneffekt in Firefox (6.0 und niedriger), wo verhindert wird, dass die :activePseudoklasse auf das Element angewendet wird. Dies bedeutet, dass ich es nicht wirklich für meine Links verwenden kann.

— Andy E

3

Entschuldigung, das ist schrecklich. Siehe unten Antwort.

— Madbreaks

216

Dieses Ding funktioniert ..... Probieren Sie es aus.

<BODY ondragstart="return false;" ondrop="return false;">

ich hoffe es hilft. Vielen Dank

— Syntax-Fehler
quelle

6

Funktioniert super! (Attribute können auch auf ein <div>Element gesetzt werden.)

— VasiliNovikov

4

stimmte für diese Antwort. Die Maus-Antwort IMO ist zu kurz (Sie können das Maus-Ereignis für andere Fälle verwenden). Diese Antwort hat einwandfrei funktioniert :)

— Daniel van Dommele

4

Dies ist in der Tat eine viel bessere Antwort, da 'PreventDefault ()' bei gedrückter Maus zu viele Nebenwirkungen hat (z. B. um das Fokussieren / Aufheben der Fokussierung von Formulareingaben zu verhindern)

— Jecimi,

Dies sollte die akzeptierte Antwort sein, da dies die Klickaktion nicht beeinflusst.

— Rafaelmorais

In Verbindung mit einem copy pasteListener scheint dies die perfekte Lösung zu sein, um einen Benutzer zu zwingen, die Eingabe einzugeben, anstatt etwas einzufügen / hineinzuziehen, ohne andere Teile der Seite zu beeinträchtigen.

— Daniel Bonnell

21

Sie können das Ziehen einfach mithilfe eines draggable="false"Attributs deaktivieren .
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
quelle

Funktioniert wie ein Zauber in Chrome 59

— Kashiraja

1

Dies sollte die akzeptierte Antwort sein, kein JS, einfaches HTML-Attribut, das von allen Browsern unterstützt wird: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

1

Dies ist die beste Antwort

— Argun

12

Dies könnte funktionieren: Sie können die Auswahl mit CSS3 für Text, Bild und im Grunde alles deaktivieren.

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Natürlich nur für die neueren Browser. Weitere Details finden Sie unter:

Wie deaktiviere ich die Hervorhebung der Textauswahl mithilfe von CSS?

— Tosh
quelle

Ich danke dir sehr. Ich möchte ein Klick-fähiges div, aber mit deaktiviertem Ziehen.

— Ionică Bizău

@ Ionică Bizău Wenn Sie Dinge anklickbar machen möchten, ist es besser, eine Schaltfläche oder ein Tag zu verwenden, da bestimmte Geräte ohne Maus und Touchscreen diese erkennen und für Benutzer auswählbar machen.

— Tosh

8

Mit jQuery wird es ungefähr so sein:

$(document).ready(function() {
  $('#yourDiv').on('mousedown', function(e) {
      e.preventDefault();
  });
});

In meinem Fall wollte ich den Benutzer daran hindern, Text in den Eingaben abzulegen, also habe ich "drop" anstelle von "mousedown" verwendet.

$(document).ready(function() {
  $('input').on('drop', function(event) {
    event.preventDefault();
  });
});

Stattdessen können Sie event.preventDefault () false zurückgeben. Hier ist der Unterschied.

Und der Code:

$(document).ready(function() {
  $('input').on('drop', function() {
    return false;
  });
});

— Victor Romano
quelle

1

Dies ist eine Geige, die ich immer mit meinen Webanwendungen verwende:

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

Dadurch wird verhindert, dass etwas in Ihrer App per Drag & Drop verschoben wird. Abhängig von den Touranforderungen können Sie den Body Selector durch einen Container ersetzen , den Kinder nicht ziehen sollten.

— Lis
quelle

0

Versuche dies

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

— verrückter Juni
quelle

0

Für inputElemente funktioniert diese Antwort für mich.

Ich habe es auf einer benutzerdefinierten Eingabekomponente in Angular 4 implementiert, aber ich denke, es könnte mit reinem JS implementiert werden.

HTML

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

Komponentendefinition (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

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

— Tito Leiva
quelle

0

Verwenden Sie die Antwort von @ SyntaxError unter https://stackoverflow.com/a/13745199/5134043

Ich habe es geschafft, dies in React zu tun. Der einzige Weg, den ich herausfinden konnte, bestand darin, die Methoden ondragstart und ondrop wie folgt an einen Schiedsrichter anzuhängen:

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

  return (
    <div ref={panelManagerBody}>

— kriskate
quelle

0

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;
   });

— checknov
quelle

-1

Diese JQuery hat für mich funktioniert: -

$(document).ready(function() {
  $('#con_image').on('mousedown', function(e) {
      e.preventDefault();
  });
});

— Piyush
quelle