Matukio ya ondragend
Ufwedhi na Matumizi
Matukio ya ondragend inasababishwa kwa kumaliza kusaidia elementi au chaguo la matukio
Kusaidia ni msaada wa kawaida kwenye HTML5. Hii ni kama inaingia kwa kusaidia kwenye nafasi tofauti. Kuelewa vizuri zaidi, tafadhali sasa hapa Ugumu wa HTML5kwa mbinu ya HTML.
Msaada:Kuweka elementi yenye uwanja wa kusaidia, tumia kigeukia cha kuu Mwongozo wa HTML5 draggable。
Msaada:Kwa msingi, viungo na picha vinaweza kusaidia, bila ya kufaa draggable.
Kwenye mazingira mengi ya kusaidia kwenye kifaa cha kusaidia, kuna matukio mengi yanayotumika na yanaweza kufanyika:
Matukio yanayotengenzeka kwenye mbinu yenye uwanja wa kusaidia (elementi ya msingi):
- ondragstart - Inasababishwa kwa kuanza kusaidia element
- ondrag - Inasababishwa kwa kusaidia element
- ondragend - Inasababishwa kwa kumaliza kusaidia element
Matukio yanayotengenzeka kwenye nafasi ya kusaidia:
- ondragenter - Inasababishwa kwa kumaliza kusaidia element kuingia kwenye nafasi ya kusaidia
- ondragover - Inasababishwa kwa kumaliza kusaidia element kwenye nafasi ya kusaidia
- ondragleave - Inasababishwa kwa kumaliza kusaidia element kushindwa kwenye nafasi ya kusaidia
- ondrop - Inasababishwa kwa kumaliza kusaidia element inayotumika kwenye nafasi ya kusaidia
Mifano
Wakati mtu amakamilisha kusaidia <p> element, JavaScript haitakayafanyishwa:
<p draggable="true" ondragend="myFunction(event)">Kupiga hapa!</p>
Kuna mifano mingine ya TIY kwenye ukurasa huo chini.
Umuundo
Kwenye HTML:
<element ondragend="myScript">
Kwenye JavaScript:
object.ondragend = function(){myScript};
Kwenye JavaScript, tumia methodi ya addEventListener():
object.addEventListener("dragend", myScript);
Msaada:Internet Explorer 8 au ya kutosha hawezi kuchukua Mwongozo wa addEventListener()。
Mifano ya habari ya teknolojia
| Inakwenda kwenye kina: | Inatumika |
|---|---|
| Inafikia: | Hakuna matumizi |
| Aina ya matukio: | DragEvent |
| Mifano ya kina ya HTML inayosimamia: | Wote wa HTML kina |
| DOM Version: | Matukio ya Kiwango 3 |
Matumizi ya kina cha kufikia kudoketa
Uainishaji wa namba kwenye tabia inaonyesha sababu ya kwanza ya kufikia kufikia kwa kina cha kufikia kudoketa hii matukio.
| Matukio | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragend | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Mfano mengi
Tukio la demo la kila sababu za kudoketa na kusababisha:
<p draggable="true" id="dragtarget">Doketa nani!</p>
<div class="droptarget">Angalia hapa!</div>
<script>
/* ----------------- Matukio yanayotolewa kwenye kina cha kufikia kudoketa ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData() method seta aina ya data na thamani ya data ya kina cha kufikia kudoketa
event.dataTransfer.setData("Text", event.target.id);
// Kwenye kuanza kudoketa p element kwa kichwa cha habari
document.getElementById("demo").innerHTML = "Kuanza kudoketa p element.";
// Kubadilisha kina cha kuzingatia kwa kina cha kufikia kudoketa elementi inayotumika
event.target.style.opacity = "0.4";
});
// Kwenye kusababisha kudoketa p element, kubadilisha rangi ya habari ya chapa
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Kufikia kusababisha kudoketa p element kwa kichwa cha habari na kurejeshwa kwa kina cha kuzingatia
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Makini kufikia kwa kusababisha p element.";
event.target.style.opacity = "1";
});
/* ----------------- Hatua zilizotumika katika kuingiza kwenye siku hizi ----------------- */
// Kama p elementi inayotumika kusaidia ingia kwenye droptarget, badilisha rangia ya divi
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Kwa kawaida, hali ya kuingiza data/elementi kwenye elementi nyingine haikuchukuliwa. Kuweza kuingiza, inafaa kutengeneza hatua ya kuzingatia kwa elementi
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Kama p elementi inayotumika kusaidia iweza kufikia droptarget, rejesha rangia ya divi
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Kwenye kifo - Kupunguza hatua ya kuzingatia data ya wasayari (ingia kwa kutumia viungo wakati wa kuingiza)
Rejesha rangia ya output na rangia ya div ya divi
Tumia method ya dataTransfer.getData() kuupata data ya inayotumika kusaidia
Data ya inayotumika kusaidia ni id ya elementi ya inayotumika kusaidia ("drag1")
Angalia elementi ya inayotumika kusaidia katika kuingiza elementi ya inayotumika kusaidia
*/
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>
