Matukio ya ondragenter

Mefano na Matumizi

Matukio ya ondragenter inasababishwa kama elementi inayotumika au uchaguzi wa matukio inapokwenda kwenye kikamilifi cha kusaidia.

Matukio ya ondragenter na ondragleave inasaidia mtumiaji kuelewa kwamba elementi inayotumika inayotumika inapokwenda kwenye kikamilifi cha kusaidia au inapokwenda kwenye kikamilifi cha kusaidia. Kwa mfano, inaweza kufikiria rangi ya mabara kama elementi inayotumika inapokwenda kwenye kikamilifi cha kusaidia na kusifaa rangi kama elementi inapokwenda kwenye kikamilifi cha kusaidia.

Kusaidia ni mifano yenye uharibifu kwenye HTML5. Hii ni kama unatoa kikweli kwa sababu ya kusaidia kutoa kwa sababu ya kusaidia. Kupata mafanikio zaidi, tafadhali sasa kusoma mafanikio yetu ya HTML5. Utuaguzi wa HTML5kwenye mafanikio ya HTML. Kupata mafanikio zaidi, tafadhali sasa kusoma mafanikio yetu ya HTML5.

Mafanikio:Kuweka elementi inayotumika kwa kusaidia, tumia kwa kawaida Mafanikio ya draggable ya HTML5.

Mafanikio:Kwa kawaida, viungo na picha vinaweza kutumika kwa kusaidia, haukubali kufikiria uharibifu wa kusaidia.

Kwenye matukio ya kusaidia kwa kusaidia kwa kusaidia, kuna matukio mengi yanayotumika na yanaweza kufanyika:

Matukio yenye uharibifu kwenye kikamilifi cha kusaidia (kigeuko):

ondragstart - Inasababishwa kama mtumiaji anafikisha kutoa elementi inayotumika
ondrag - Inasababishwa kama elementi inayotumika inapokwenda kwenye kusaidia
ondragend - Inasababishwa kama mtumiaji anafikisha kutoa elementi inayotumika

Matukio yenye uharibifu kwenye kikamilifu cha kusaidia:

ondragenter - Inasababishwa kama elementi inayotumika inapokwenda kwenye kikamilifu cha kusaidia
ondragover - Inasababishwa kama elementi inayotumika inapokwenda kwenye kikamilifu cha kusaidia
ondragleave - Inasababishwa kama elementi inayotumika inapokwenda kwenye kikamilifu cha kusaidia
ondrop - Inasababishwa kama elementi inayotumika inapokwenda kwenye kikamilifu cha kusaidia

Mifano

Wakati kwa JavaScript inafanyishwa kama ingia elementi inayotumika kwa kusaidia kufikiria kwa kutoa kwa sababu ya uharibifu wa kusaidia:

<div ondragenter="myFunction(event)"></div>

Tenda tena!

Kwenye ukurasa chini kuna mifano ya TIY zaidi.

Mifano ya Kiingilizi

Kwenye HTML:

<element ondragenter="myScript">

Tenda tena!

Kwenye JavaScript:

object.ondragenter = function(){myScript};

Tenda tena!

Kwenye JavaScript, tumia methodi ya addEventListener():

object.addEventListener("dragenter", myScript);

Tenda tena!

Mafanikio:Internet Explorer 8 na kipunguka na version ya zamani hauwezi kusaidia Method ya addEventListener().

Mafanikio ya teknolojia

Inabubiri:	Wamekubaliwa
Inafikia:	Wamekubaliwa
Type of event:	DragEvent
HTML tags ya kusukuma:	Wote HTML elements
DOM Version:	Matukio ya Level 3

Mafanikio ya mifani

Mafanikio ya namba kwenye tabia inaeleza sababu ya kuanza kusukuma kwa sababu ya matukio haya

Matukio	Chrome	IE	Firefox	Safari	Opera
ondragenter	4.0	9.0	3.5	6.0	12.0

Mifanikio mingine

Mifanikio ya kila hatua ya kudraga na kuletwa:

<p draggable="true" id="dragtarget">Draimi!</p>
<div class="droptarget">Weka hapa!</div>
<script>
/* ----------------- Matukio yanayotukia kwenye jadwala wa kudraga ----------------- */
document.addEventListener("dragstart", function(event) {
  // Kipata dataTransfer.setData() method kuweka aina ya data na maadili ya kina ya kina ya kina
  event.dataTransfer.setData("Text", event.target.id);
  // Kipata uharibifu kuanza kudraga p element
  document.getElementById("demo").innerHTML = "Kuanza kudraga p element.";
  // Kumaliza uwekezaji wa uharibifu wa kiwezo cha kudraga
  event.target.style.opacity = "0.4";
});
// Muda wa kudraga p element, kumaliza uharibifu wa rangi ya matukio ya uharibifu
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Kamilika dragizi ya p element na kipata matukio ya uharibifu na kumaliza uwekezaji wa muharibifu
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Mafikia dragizi ya p element.";
  event.target.style.opacity = "1";
});
/* ----------------- Hatua zilizofanyika katika mawaka mazalizaliwa ----------------- */
// Kwa sababu ya p elementi iliyotumika kudhadhika inasubiri kwenye droptarget, kusababisha ujenge wa DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Kwa msingi, hali hii haikwekubaliwa. Kusababisha hali hii ikwekubaliwa, inafanyika kusikia kwa hatua ya msingi ya elementi
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Kwa sababu ya p elementi iliyotumika kudhadhika inakataa kwenye droptarget, kurekebisha ujenge wa DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - Kusikia kwa hatua ya msingi wa browser kwa data (inafanyia hatua ya msingi kufungua kama muhafu) */
Kuendeleza rangi ya maandiko na ujenge wa DIV wa kufikia rangi
Tumia method ya dataTransfer.getData() kuupata data inayotumika kudhadhika
Data inayotumika kudhadhika ni id ya elementi iliyotumika kudhadhika ("drag1")
Kuandika elementi iliyotumika katika elementi inayolagwa
*/
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>

Tenda tena!