Wie kann ich Drag-and-Drop bei HTML-Elementen verhindern?-CSS-Tutorial-php.cn

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

Barbara Streisand

Freigeben： 2024-11-28 16:54:19

Original

1039 Leute haben es durchsucht

How Can I Prevent Drag-and-Drop on HTML Elements?

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>

Nach dem Login kopieren

Alternativ können Sie es für den gesamten Dokumentkörper deaktivieren und bei Bedarf wieder aktivieren:

<body ondragstart="return false;" ondrop="return false;"></body>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonWie kann ich Drag-and-Drop bei HTML-Elementen verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!