Tukio la ondrop
Uhusiano na Matumizi
Kina kufichwa kinatofautiana kwa sababu elementi inahusiana au elementi inayoselewa inaonekana kwenye kipakuo cha kufichwa wa bora.
Kusikia ni kinaendelea kina HTML5. Ni kama unavyofichia kina na kuondoa kwenye eneo lingine. Ushirikiano wa HTML5Mafanikio ya HTML. Kuweza kufikia mafanikio ya kusikia.
Maelezo:Kuweza kufichwa kwa elementi, tumia globali Mafanikio ya draggable ya HTML5。
Maelezo:Kwa chaguo cha kawaida, viungo na picha vinaweza kufichwa, haujifanyia kufikia properti draggable.
Kwenye kipakuo cha kufichwa kinaendelea kufanywa matukio mengi kwenye jadi za kusikia, na inaweza kutokea:
Matukio yenye uharibifu kwenye kipakuo cha kufichwa (kina chanzo):
- ondragstart - Hili inatofautiana kwa sababu mtumishi anasainika kufichwa elementi
- ondrag - Hili inatofautiana kwa sababu elementi inahusiana
- ondragend - Hili inatofautiana kwa sababu mtumishi anapokamilika kufichwa elementi
Matukio yenye uharibifu kwenye kipakuo cha kufichwa:
- ondragenter - Hili inatofautiana kwa sababu elementi inapokua kwenye kipakuo cha kufichwa
- ondragover - Hili inatofautiana kwa sababu elementi inahusiana na kipakuo cha kufichwa
- ondragleave - Hili inatofautiana kwa sababu elementi inafikia nje ya kipakuo cha kufichwa
- ondrop - Hili inatofautiana kwa sababu elementi inahusiana na nje ya kipakuo cha kufichwa
Mifano
Kwenye kina <div> kinaendelea kufanya JavaScript:
<div ondrop="myFunction(event)"></div>
Kuna mifano mingi ya TIY kwenye ukurasa huo chini.
Mafanikio
Kwenye HTML:
<element ondrop="myScript">
Kwenye JavaScript:
object.ondrop = function(){myScript};
Kwenye JavaScript, tumia methodi addEventListener():
object.addEventListener("drop", myScript);
Maelezo:Internet Explorer 8 au yaonyeza wa zamani hawezihusika addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| Matukio | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Mafanikio mengenea
Mbinu ya kumwambia matukio ya kusaidia kwa kila sababu:
<p draggable="true" id="dragtarget">Saidia nina!</p>
<div class="droptarget">Angalia hapa!</div>
<script>
/* ----------------- Matukio yenye uwanja wa kusaidia kwenye kina yenye uwanja ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData() methodu inastawi data type na thamani ya data ya kusaidia
event.dataTransfer.setData("Text", event.target.id);
// Kamilifu kusaidia kipinduli kama p element na kushambulia matukio
document.getElementById("demo").innerHTML = "Kuanza kusaidia kipinduli kama p element.";
// Kamilifu kusaidia kipinduli kama p element na kumwambia kina cha kina
event.target.style.opacity = "0.4";
});
// Kamilifu kusaidia kipinduli kama p element na kumwambia rangi ya matukio ya kusaidia
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Kamilifu kusaidia kipinduli kama p element na kushambulia matukio na kumekuja kwa kina
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Kamilifu kusaidia kipinduli kama p element.";
event.target.style.opacity = "1";
});
/* ----------------- Matukio yenye muhimu katika kielewa hali ya kufichwa ----------------- */
// Kama p elementi inayotoka haitumika kwenye droptarget, badilisha stili ya div ya ukingo
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Kwa kawaida, hatuwezi kuondoa data/element katika elementi zingine. Kuweza kuondoa, lazima tuondoa uendeshaji wa kawaida wa elementi
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Kama p elementi inayotoka inaondoka kwenye droptarget, kirejeza stili ya div ya ukingo
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Kupoteza - Kukidhi uendeshaji wa data wa kawaida wa kibisi (kama ilepo kwa mkataba) */
Kirejeza rangi ya output text na rangi ya div ya ukingo
Tumia methodi ya dataTransfer.getData() kuwaza data inayotoka
Data inayotoka ni id ya elementi iliyotoka ("drag1")
Angalia elementi iliyotoka inayotengwa kwenye elementi yenye mashabiki
*/
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>
