Zdarzenie ondragleave
Definicja i użycie
Wydarzenie ondragleave występuje, gdy element przeciągany lub wybrany tekst opuszcza cel umieszczania.
wydarzenia ondragenter i ondragleave mogą pomóc użytkownikowi zrozumieć, że dany element przeciągany jest wkraczający lub opuszczający cel umieszczania. Na przykład, można ustawić kolor tła, gdy element wchodzi w cel umieszczania, i usunąć kolor, gdy element opuszcza cel.
Przeciąganie i upuszczanie to bardzo powszechna funkcja w HTML5. Oznacza to, że gdy "chwytasz" obiekt i przeciągasz go do innej pozycji. Aby dowiedzieć się więcej, przeczytaj nasze informacje o Przenoszenie HTML5nauczycie się więcej o HTML.
Komentarz:Aby uczynić element przeciągalnym, użyj globalnego Atrybut draggable HTML5。
Wskazówka:Domyślnie, linki i obrazy są przeciągane, nie wymaga się atrybutu draggable.
W różnych fazach operacji przeciągania i upuszczania używane jest wiele wydarzeń i mogą wystąpić:
Wydarzenia wyzwalane na celu przeciągania (element źródłowy):
- ondragstart - gdy użytkownik zaczyna przeciągać element
- ondrag - gdy element jest przeciągany
- ondragend - gdy użytkownik kończy przeciąganie elementu
Wydarzenia wyzwalane na celu umieszczania:
- ondragenter - gdy przeciągany element wchodzi na cel umieszczania
- ondragover - gdy przeciągany element jest na celu umieszczania
- ondragleave - gdy przeciągany element odchodzi od celu umieszczania
- ondrop - gdy przeciągany element jest umieszczany na celu umieszczania
实例
Wykonaj JavaScript, gdy element przeciągany opuszcza cel umieszczania:
<div ondragleave="myFunction(event)"></div>
Poniżej znajdują się więcej przykładów TIY.
Gramatyka
W HTML:
<element ondragleave="myScript">
W JavaScript:
obiekt.ondragleave = function(){myScript};
W JavaScript, używając metody addEventListener():
obiekt.addEventListener("dragleave", myScript);
Komentarz:Internet Explorer 8 lub wcześniejsze wersje nie obsługują tego Metoda addEventListener()。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | 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";
});
/* ----------------- Wydarzenia wywoływane na celu umieszczenia ----------------- */
// Kiedy element p, który można przeciągnąć, wchodzi do droptarget, zmień styl ramki DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Domyślnie nie można umieszczać danych/elementów w innych elementach. Aby umożliwić umieszczanie, musimy zablokować domyślne przetwarzanie elementu
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Kiedy element p, który można przeciągnąć, opuszcza droptarget, przywróć styl ramki DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Przy zrzuceniu - zapobiegaj domyślnemu przetwarzaniu danych przeglądarki (domyślne umieszczanie jako linki)
Przywróć kolor tekstu i kolor ramki DIV
Użyj metody dataTransfer.getData() do uzyskania danych przeciągnięcia
Dane przeciągnięte to identyfikator elementu przeciąganego ("drag1")
Dodaj element, który można przeciągnąć, do elementu docelowego
*/
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>
