ondragleave-Ereignis
Definition und Verwendung
Das Ereignis ondragleave tritt auf, wenn ein verschiebbares Element oder eine Textauswahl den gültigen Platzhalter verlässt.
ondragenter und ondragleave Ereignisse können den Benutzer informieren, dass ein verschiebbares Element kurz vor dem Eintreten oder Verlassen des Platzhalters steht. Zum Beispiel können Sie die Hintergrundfarbe eines verschiebbaren Elements setzen, wenn es den Platzhalter betritt, und die Farbe entfernen, wenn das Element den Platzhalter verlässt.
Drag-and-Drop ist eine sehr häufige Funktion in HTML5. Das bedeutet, wenn Sie ein Objekt "griffen" und an einen anderen Ort ziehen, wie z.B. um mehr über HTML5-Ziehen und LoslassenHTML-Tutorial.
Anmerkung:Um ein Element verschiebbar zu machen, verwenden Sie den globalen 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 verschiebbaren Ziel (Quellelement) ausgelöst werden:
- ondragstart - Wird ausgelöst, wenn der Benutzer das Verschieben des Elements beginnt
- ondrag - Wird ausgelöst, wenn das Element verschoben wird
- ondragend - Wird ausgelöst, wenn der Benutzer das Verschieben des Elements beendet
Ereignisse, die auf dem Platzhalter ausgelöst werden:
- ondragenter - Wird ausgelöst, wenn das verschobene Element den Platzhalter betritt
- ondragover - Wird ausgelöst, wenn das verschobene Element auf dem Platzhalter ist
- ondragleave - Wird ausgelöst, wenn das verschobene Element den Platzhalter verlässt
- ondrop - Wird ausgelöst, wenn das verschobene Element auf den Platzhalter gelegt wird
实例
Führe JavaScript aus, wenn ein verschiebbares Element den Platzhalter verlässt:
<div ondragleave="myFunction(event)"></div>
Unten auf der Seite gibt es mehr TIY-Beispiele.
Syntax
In HTML:
<Element ondragleave="myScript">
In JavaScript:
Objekt.ondragleave = function() {myScript};
In JavaScript wird die Methode addEventListener() verwendet:
Objekt.addEventListener("dragleave", myScript);
Anmerkung:Internet Explorer 8 oder frühere Versionen unterstützen dies nicht addEventListener() Methode。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragleave | 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 Zielort ausgelöst werden ----------------- */
// Wenn das verschiebbare p-Element den droptarget betritt, ändern Sie den Rahmenstil des DIVs
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 verschiebbare p-Element den droptarget verlässt, stellen Sie den Rahmenstil des DIVs zurück
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Beim Ablegen - Verhindern Sie die Standardverarbeitung des Browsers für Daten (Standardplatzierung öffnet als Link)
Stellen Sie die Farbe des Ausgabetextes und die Rahmenfarbe des DIVs 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 zum Ziellement 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>
