Evento ondragend
Definizione e uso
Si verifica l'evento ondragend quando l'utente ha completato il trascinamento dell'elemento o la selezione del testo.
Il trascinamento e il rilascio è una funzione comune in HTML5. È quando si "prende" un oggetto e si trascina in diverse posizioni. Per saperne di più, leggi la nostra guida su Trascinamento HTML5la guida HTML.
Nota:Per rendere un elemento trascinabile, utilizzare il globale Proprietà draggable HTML5。
Suggerimento:Per impostazione predefinita, i link e le immagini sono trascinabili senza la proprietà draggable.
In diverse fasi dell'operazione di trascinamento e rilascio, ci sono molti eventi utilizzati e possono verificarsi:
Eventi scatenati sull'elemento sorgente (destinazione trascinabile):
- ondragstart - Si verifica quando l'utente inizia a trascinare l'elemento
- ondrag - Si verifica quando l'elemento viene trascinato
- ondragend - Si verifica quando l'utente ha completato il trascinamento dell'elemento
Eventi scatenati sul punto di destinazione:
- ondragenter - Si verifica quando l'elemento trascinato entra nel punto di destinazione
- ondragover - Si verifica quando l'elemento trascinato si trova sul punto di destinazione
- ondragleave - Si verifica quando l'elemento trascinato si allontana dal punto di destinazione
- ondrop - Si verifica quando l'elemento trascinato viene posizionato sul punto di destinazione
Esempi
Esegui JavaScript quando l'utente ha completato il trascinamento dell'elemento <p>:
<p draggable="true" ondragend="myFunction(event)">Trascinami!</p>
Più esempi TIY sono disponibili nella parte inferiore della pagina.
Sintassi
In HTML:
<elemento ondragend="myScript">
In JavaScript:
oggetto.ondragend = function() {myScript};
In JavaScript, utilizzare il metodo addEventListener():
oggetto.addEventListener("dragend", myScript);
Nota:Internet Explorer 8 o versioni precedenti non supportano Metodo addEventListener()。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | 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";
});
/* ----------------- Eventi scatenati sulla destinazione di posizionamento ----------------- */
// Quando l'elemento p trascinabile entra nel droptarget, cambia lo stile del bordo del DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Permessi di default, non è possibile posizionare dati/elementi in altri elementi. Per permettere il posizionamento, dobbiamo prevenire il trattamento predefinito degli elementi
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Quando l'elemento p trascinabile lascia il droptarget, reimposta lo stile del bordo del DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Al rilascio - prevenire il trattamento predefinito del browser per i dati (apertura predefinita come link quando rilasciato) */
Reimposta il colore del testo di output e il colore del bordo del DIV
Ottieni i dati trascinati utilizzando il metodo dataTransfer.getData()
I dati trascinati sono l'id dell'elemento trascinato ("drag1")
Aggiungi l'elemento trascinato all'elemento di destinazione
*/
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>
