ondragend Event
Definitie en gebruik
Wanneer de gebruiker het element of de tekstkeuze heeft gesleept, gebeurt er een ondragend gebeurtenis.
Slepen en neerzetten is een zeer gebruikelijke functie in HTML5. Dit is wanneer je een object "vasthoudt" en naar een andere positie sleept. Voor meer informatie, lees onze HTML5 Drag and DropHTML handleiding.
Opmerking:Om een element sleepbaar te maken, gebruik dan de globale HTML5 draggable eigenschap。
Tip:Standaard zijn links en afbeeldingen sleepbaar zonder de draggable eigenschap nodig te hebben.
Bij verschillende stadia van het slepen en neerzetten worden veel gebeurtenissen gebruikt en kunnen deze optreden:
Gebeurtenissen die op de bron (bron-elemement) worden getriggerd:
- ondragstart - Wanneer de gebruiker het element begint te slepen, gebeurt dit
- ondrag - Wanneer het element wordt gesleept, gebeurt dit
- ondragend - Wanneer de gebruiker het element heeft gesleept, gebeurt dit
Gebeurtenissen die op de doellegger worden getriggerd:
- ondragenter - Wanneer het gesleepte element de doellegger binnenkomt, gebeurt dit
- ondragover - Wanneer het gesleepte element op de doellegger staat, gebeurt dit
- ondragleave - Wanneer het gesleepte element de doellegger verlaat, gebeurt dit
- ondrop - Wanneer het gesleepte element op de doellegger wordt geplaatst, gebeurt dit
Voorbeeld
Voer JavaScript uit wanneer de gebruiker de <p> element heeft gesleept:
<p draggable="true" ondragend="myFunction(event)">Sleep me!</p>
Er zijn meer TIY voorbeelden onder de pagina.
Syntax
In HTML:
<element ondragend="myScript">
In JavaScript:
object.ondragend = function(){myScript};
Gebruik in JavaScript de addEventListener() Methode:
object.addEventListener("dragend", myScript);
Opmerking:Internet Explorer 8 of eerder worden niet ondersteund addEventListener() Methode。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragend | 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 het plaatsingsdoel ----------------- */
// Wanneer het sleepbare p-element de droptarget binnenkomt, wijzig de randstijl van de DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Standaard is het niet mogelijk om gegevens/elementen in andere elementen te plaatsen. Om plaatsen mogelijk te maken, moeten we de standaard verwerking van het element blokkeren
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Wanneer het sleepbare 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 plaatsen wordt geopend als koppeling) */
Reset de kleur van de uitvoer tekst en de DIV randkleur
Gebruik de methode dataTransfer.getData() om de gesleepte gegevens te verkrijgen
De te slepen gegevens zijn het id van het te slepen element ("drag1")
Het te slepen element wordt toegevoegd aan het plaatsingselement
*/
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>
