ondragend 事件
Paglilinaw at Gamit
Nangyayari ang kaganapan na ondragend kapag ang user ay tapos na mag-drag sa elemento o text selection.
Drag and drop ay isang napakakaraniwang function sa HTML5. Ito ay kapag ikaw ay nag "hikayat" ng isang bagay at idrag ito sa iba't ibang posisyon. Para matuto ng mas marami, basahin ang aming tungkol sa HTML5 拖放HTML tutorial.
Komento:Para gawing draggable ang elemento, gamitin ang global HTML5 draggable attribute。
Mga tip:Bilang default, ang mga link at ang mga imahe ay maaaring idrag, hindi kailangan ng atributo na draggable.
May maraming kaganapan na ginagamit sa iba't ibang yugto ng operasyon ng pag-drag at maaaring mangyari:
Mga kaganapan na nangyayari sa layunin ng pag-drag (pinagmulang elemento):
- ondragstart - Nagaganap kapag ang user ay nagsimula ng pag-drag sa elemento
- ondrag - Nagaganap kapag ang elemento ay idrag
- ondragend - Nagaganap kapag ang user ay tapos na mag-drag sa elemento
Mga kaganapan na nangyayari sa tagpuang mapapunta:
- ondragenter - Nagaganap kapag ang inidrag na elemento ay pumasok sa tagpuang mapapunta
- ondragover - Nagaganap kapag ang inidrag na elemento ay nasa tagpuang mapapunta
- ondragleave - Nagaganap kapag ang inidrag na elemento ay umalis sa tagpuang mapapunta
- ondrop - Nagaganap kapag ang inidrag na elemento ay ilagay sa tagpuang mapapunta
Sample
Kapag ang user ay tapos na mag-drag sa <p> elemento, isasagawa ang JavaScript:
<p draggable="true" ondragend="myFunction(event)">Drag me!</p>
May mas maraming TIY example sa ibaba ng pahina.
Grammar
Sa HTML:
<element ondragend="myScript">
Sa JavaScript:
object.ondragend = function() {myScript};
Sa JavaScript, gamit ang addEventListener() metoda:
object.addEventListener("dragend", myScript);
Komento:Internet Explorer 8 o mas maagang bersiyon ay hindi tumatanggap addEventListener() 方法。
Detalye ng teknolohiya
| Bububong: | Suportado |
|---|---|
| Makakansela: | Hindi suportado |
| Uri ng kaganapan: | DragEvent |
| Suportadong HTML na tag: | Lahat ng HTML na elemento |
| DOM bersyon: | Level 3 Events |
Suporta ng Browser
Ang mga numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na sumusuporta sa kaganapan
| Kaganapan | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragend | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Higit pang mga halimbawa
Demo ng lahat ng posibleng kaganapan ng pagdred at pag-iwan:
<p draggable="true" id="dragtarget">I-drag ko!</p>
<div class="droptarget">Mag-iwan dito!</div>
<script>
/* ----------------- Ang mga kaganapan na nangyari sa target ng pagdred ----------------- */
document.addEventListener("dragstart", function(event) {
// Ang dataTransfer.setData() na method ay nagtatakda ng uri ng datos at ang halaga ng pinagdred na datos
event.dataTransfer.setData("Text", event.target.id);
// Pagkatapos ng nagsimula ang pagdred ng p element, ipalabas ang ilang teksto
document.getElementById("demo").innerHTML = "Nagsimula ang pagdred ng p element.";
// Palitan ang opacity ng puwedeng i-drag na elemento
event.target.style.opacity = "0.4";
});
// Pagdred ng p element, palitan ang kulay ng ipalabas na teksto
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Pagkatapos ng pagdred ng p element, ipalabas ang ilang teksto at ireset ang opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Natapos ang pagdred ng p element.";
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 = "";
}
});
/* On drop - 防止浏览器对数据的默认处理（默认放置时以链接打开）
重置输出文本的颜色和 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>
