ondrop händelse
Definition och användning
När en dragbar element eller textval placeras på en giltig måltarget, inträffar ondrop-händelsen.
Drag-and-drop är en mycket vanlig funktion i HTML5. Det innebär att du "tar" ett objekt och drar det till en annan plats. För att lära dig mer, läs vår artikel om HTML5 drag and dropHTML-tutorials.
Kommentar:För att göra ett element dragbart, använd global HTML5 draggable-egenskapen.
Tips:Som standard är länkar och bilder dragningsbara utan att behöva draggable-egenskapen.
Det finns många händelser som används vid olika stadier av drag-and-drop-operationer, och som kan inträffa:
Händelser som utlösas på dragbara mål (källor):
- ondragstart - När användaren börjar dra elementet
- ondrag - När elementet dras
- ondragend - När användaren släpper elementet
Händelser som utlösas på målet:
- ondragenter - När den dragbara elementen kommer in på målet
- ondragover - När den dragbara elementen är på målet
- ondragleave - När den dragbara elementen lämnar målet
- ondrop - När den dragbara elementen placeras på målet
Exempel
När en dragbar element placeras i <div>-elementet körs JavaScript:
<div ondrop="myFunction(event)"></div>
Mer TIY-exempel finns längre ner på sidan.
Syntax
I HTML:
<element ondrop="myScript">
I JavaScript:
object.ondrop = function(){myScript};
I JavaScript, använda addEventListener() metoden:
object.addEventListener("drop", myScript);
Kommentar:Internet Explorer 8 eller tidigare versioner stöder inte addEventListener() metoden.
Tekniska detaljer
| Bubbling: | Stödjer |
|---|---|
| Kan annulleras: | Stödjer |
| HändelseTyp: | DragEvent |
| HTML-taggar som stöds: | Alla HTML-element |
| DOM-version: | Level 3 Events |
Webbläsarstöd
Numrerna i tabellen anger den första webbläsaren som fullständigt stöder händelsen.
| event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Mer exempel
Demonstration av alla möjliga drag-och-släpp-händelser:
<p draggable="true" id="dragtarget">Dra mig!</p>
<div class="droptarget">Släpp här!</div>
<script>
/* ----------------- Händelser som utlösas på dragmålet ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData() metoden sätter datatypen och värdet för den dragbara data
event.dataTransfer.setData("Text", event.target.id);
// Skriv ut text när p-elementet börjar dras
document.getElementById("demo").innerHTML = "Började dra p-elementet.";
// Ändra genomskinligheten för den dragningsbara elementet
event.target.style.opacity = "0.4";
});
// Ändra utdatafärgen när p-elementet dras
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Efter att ha släppt p-elementet, skriv ut text och återställ genomskinlighet
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Avslutade att dra p elementet.";
event.target.style.opacity = "1";
});
/* ----------------- 在放置目标上触发的事件 ----------------- */
// 当可拖动的 p 元素进入 droptarget 时，改变 DIV 的边框样式
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// 默认情况下，不能在其他元素中放置数据/元素。为了允许放置，我们必须阻止元素的默认处理
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// 当可拖动的 p 元素离开 droptarget 时，重置 DIV 的边框样式
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* 防止浏览器对数据的默认处理（默认放置时以链接打开）
重置输出文本的颜色和 DIV 的边框颜色
使用 dataTransfer.getData() 方法获取拖动的数据
被拖拽的数据是被拖拽元素的 id ("drag1")
将被拖动的元素附加到放置元素中
*/
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>
