Wie kann ich Drag-and-Drop bei HTML-Elementen verhindern?

Drag-and-Drop auf HTML-Elementen verhindern: Eine umfassende Lösung

Beim Entwickeln komplexer Webanwendungen mit Fenstersystemen kann es gelegentlich zu Problemen kommen Hindernisse. Insbesondere das standardmäßige Drag-and-Drop-Verhalten des Browsers kann beabsichtigte Größenänderungsvorgänge beeinträchtigen. Um dieses Problem zu lösen, sollten Sie die folgende Lösung in Betracht ziehen:

Drag-and-Drop für bestimmte Elemente deaktivieren

Durch die Nutzung der HTML-Ereignisse ondragstart und ondrop können Sie Drag-and-Drop deaktivieren -and-drop innerhalb bestimmter HTML-Elemente. Integrieren Sie die folgenden Attribute in die relevanten Elemente:

<div>
<p>Alternativ können Sie es für den gesamten Dokumentkörper deaktivieren und bei Bedarf wieder aktivieren:</p>
<pre class="brush:php;toolbar:false">

jQuery Lösung

Um mit jQuery das gleiche Ergebnis zu erzielen, können Sie die Funktion „draggable()“ verwenden. Methode:

$(document).ready(function() {
  $('#draggable').draggable({
    disabled: true
  });
});

Dynamisches Aktivieren/Deaktivieren

Für Szenarien, in denen Sie die Drag-and-Drop-Funktionalität dynamisch umschalten müssen, sollten Sie die Verwendung von „enable()“ und „disable“ in Betracht ziehen ()-Methoden in jQuery:

$('#draggable').draggable('disable');
...
$('#draggable').draggable('enable');

Umfassend Funktionalität

Dieser Ansatz deaktiviert effektiv die Textauswahl im Browser und Drag-and-Drop, während der Benutzer die Maustaste gedrückt hält. Beim Loslassen der Maustaste wird die Funktionalität wiederhergestellt. Für eine detailliertere Steuerung können Sie die Elemente angeben, bei denen Drag-and-Drop deaktiviert ist.