ondragover-Ereignis

Definition und Verwendung

Das Ereignis ondragover tritt ein, wenn ein verschiebbares Element oder eine Textauswahl auf einen gültigen Zielort gezogen wird.

Standardmäßig können Daten/Elemente nicht in anderen Elementen gelöscht werden. Um das Platzieren zu erlauben, müssen wir die Standardverarbeitung des Elements verhindern. Dies wird durch Aufrufen der Methode event.preventDefault() des Ereignisses ondragover erreicht.

Drag-and-Drop ist eine sehr häufige Funktion in HTML5. Das bedeutet, wenn Sie ein Objekt "greifen" und an einen anderen Ort ziehen. Um mehr zu erfahren, lesen Sie bitte unsere Artikel über HTML5-Ziehen-und-WerfenHTML-Tutorial.

Anmerkung:Um ein Element verschiebbar zu machen, verwenden Sie bitte das globale HTML5 draggable-Eigenschaft。

Tipp:Standardmäßig sind Links und Bilder verschiebbar und benötigen keine draggable-Eigenschaft.

Bei verschiedenen Stufen der Drag-and-Drop-Operation werden viele Ereignisse verwendet und können auftreten:

Ereignisse, die auf dem Quellziel (Quelselement) ausgelöst werden:

ondragstart - Wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements beginnt
ondrag - Wird ausgelöst, wenn das Element verschoben wird
ondragend - Wird ausgelöst, wenn der Benutzer das Ziehen des Elements beendet

Ereignisse, die auf dem Zielort ausgelöst werden:

ondragenter - Wird ausgelöst, wenn das verschobene Element in den Zielort eintritt
ondragover - Wird ausgelöst, wenn das verschobene Element auf dem Zielort ist
ondragleave - Wird ausgelöst, wenn das verschobene Element den Zielort verlässt
ondrop - Wird ausgelöst, wenn das verschobene Element auf den Zielort gelegt wird

Anmerkung:Während der Elemente verschoben werden, wird das ondragover-Ereignis alle 350 Millisekunden ausgelöst.

Beispiel

Führe JavaScript aus, wenn ein Element auf den Zielort gezogen wird:

<div ondragover="myFunction(event)"></div>

Versuchen Sie es selbst

Unten auf der Seite gibt es mehr TIY-Beispiele.

Syntax

In HTML:

<element ondragover="myScript">

Versuchen Sie es selbst

In JavaScript:

object.ondragover = function(){myScript};

Versuchen Sie es selbst

In JavaScript wird die Methode addEventListener() verwendet:

object.addEventListener("dragover", myScript);

Versuchen Sie es selbst

Anmerkung:Internet Explorer 8 oder frühere Versionen unterstützen dies nicht addEventListener() 方法。

技术细节

冒泡：	支持
可取消：	支持
事件类型：	DragEvent
支持的 HTML 标签：	所有 HTML 元素
DOM 版本：	Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件	Chrome	IE	Firefox	Safari	Opera
ondragover	4.0	9.0	3.5	6.0	12.0

更多实例

对所有可能的拖放事件的演示：

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData()方法设置被拖拽数据的数据类型和值
  event.dataTransfer.setData("Text", event.target.id);
  // 开始拖动 p 元素时输出一些文本
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // 更改可拖动元素的不透明度
  event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});
/* ----------------- Ereignisse, die auf dem Platzhalterziel ausgelöst werden ----------------- */
// Wenn das tragbare p-Element den droptarget betritt, ändern Sie den DIV-Randstil
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Standardmäßig können Daten/Elemente nicht in andere Elemente gelegt werden. Um das Legen zu erlauben, müssen wir die Standardverarbeitung des Elements verhindern
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Wenn das tragbare p-Element den droptarget verlässt, setzen Sie das DIV-Randstil zurück
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Beim Fallenlassen - Verhindern Sie die Standardverarbeitung des Browsers für Daten (Standardplatzieren öffnet als Link)
Setzen Sie die Farbe des Ausgabetexts und die Farbe der DIV-Ränder zurück
Verwenden Sie die Methode dataTransfer.getData() zur Erteilung der verschobenen Daten
Die verschobenen Daten sind die ID des verschobenen Elements ("drag1")
Fügen Sie das verschobene Element dem Platzhalterelement hinzu
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

Versuchen Sie es selbst