ondrop event
Definitie en gebruik
Wanneer een sleepbare element of tekstselectie op een geldige doellevering wordt geplaatst, gebeurt er een ondrop-gebeurtenis.
Sleep-en-place is een zeer gebruikelijke functie in HTML5. Dit is wanneer je een object "grijpt" en het naar een andere positie sleept. Voor meer informatie, lees ons over HTML5 drag and dropHTML-tutorial.
Opmerking:Om een element sleepbaar te maken, gebruik dan de globale HTML5 draggable-eigenschap。
Tip:Standaard zijn links en afbeeldingen sleepbaar zonder de eigenschap draggable nodig te hebben.
Bij verschillende stadia van de sleep- en plaatsoperatie worden veel gebeurtenissen gebruikt en kunnen er gebeuren:
Gebeurtenissen die op het sleepbare doel (bron-element) worden getriggerd:
- ondragstart - Wanneer de gebruiker het element begint te slepen, gebeurt er iets
- ondrag - Wanneer het element wordt gesleept, gebeurt er iets
- ondragend - Wanneer de gebruiker het sleepbare element voltooit, gebeurt er iets
Gebeurtenissen die op de doellevering worden getriggerd:
- ondragenter - Wanneer het sleepbare element de doellevering binnenkomt, gebeurt er iets
- ondragover - Wanneer het sleepbare element op de doellevering staat, gebeurt er iets
- ondragleave - Wanneer het sleepbare element de doellevering verlaat, gebeurt er iets
- ondrop - Wanneer het sleepbare element op de doellevering wordt geplaatst, gebeurt er iets
Voorbeeld
Voer JavaScript uit in het <div>-element wanneer een sleepbare element wordt geplaatst:
<div ondrop="myFunction(event)"></div>
Er zijn meer TIY-exempelen onder de pagina.
Syntaxis
In HTML:
<element ondrop="myScript">
In JavaScript:
object.ondrop = function(){myScript};
In JavaScript, gebruik de methode addEventListener():
object.addEventListener("drop", myScript);
Opmerking:Internet Explorer 8 of oudere versies ondersteunen niet addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrop | 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";
});
/* ----------------- Gebeurtenissen die worden getriggerd op de doellocatie van de plaatsing ----------------- */
// Als het te slepen p-element de droptarget binnenkomt, verander de randstijl van de DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Standaard kan data/elementen niet in andere elementen worden geplaatst. Om het plaatsen mogelijk te maken, moeten we de standaard verwerking van het element blokkeren
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Als het te slepen p-element de droptarget verlaat, reset de randstijl van de DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Bij neerzetten - Voorkom de standaard verwerking van de browser voor gegevens (bij standaard neerzetten opent de link) */
Reset de kleur van de tekst en de randkleur van de DIV
Gebruik de methode dataTransfer.getData() om de gegevens van het slepen op te halen
De te slepen gegevens zijn de id van het te slepen element ("drag1")
Het te slepen element wordt toegevoegd aan het element waarop wordt neergezet
*/
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>
