Matukio ya ondragstart

Matukio ya DOM DragEvent

Makadaro na matumizi

Matukio ya ondragstart inasababishwa kama mtumiaji anafikia kuanza kudagia elementi au upelezi wa chaguo.

Kudagia ni muhimu sana katika HTML5. Hii ni kama unafikia kusambaa kina kikaa kwa kusababisha kusababisha kudagia kwenye viwango vingine. Kuelewa vizuri zaidi, siofaa kusoma maelezo yetu kuhusu Ukimbizi wa HTML5mwongozo wa HTML.

Maelezo:Kuweka elementi kudagia, tumia globali Mwongozo wa HTML5 draggable。

Maelezo:Kwa msingi, viungo na picha vinaweza kudagia, bila hiyo ya kufikiria属性 draggable.

Kwenye mawingu ya muda ya kudagia, kuna matukio mengi yanayotumiwa na yanaweza kufanyika:

Matukio yenye matokeo kwenye kiumbeji wa kudagia (elementi wa matokeo):

  • ondragstart - Inasababishwa kama mtumiaji anafikia kuanza kudagia elementi.
  • ondrag - Inasababishwa kama elementi inadagia.
  • ondragend - Inasababishwa kama mtumiaji anafikia kufikia kudagia elementi.

Matukio yenye matokeo kwenye kiumbeji wa kuingia:

  • ondragenter - Inasababishwa kama elementi inasababisha kuingia kwenye kiumbeji wa kuingia.
  • ondragover - Inasababishwa kama elementi imewahiwa kwenye kiumbeji wa kuingia.
  • ondragleave - Inasababishwa kama elementi inapotea kwenye kiumbeji wa kuingia.
  • ondrop - Inasababishwa kama elementi inadahishwa kwenye kiumbeji wa kuingia.

Mifano

Inafanyishwa JavaScript kama uwanafikia kuanza kudagia <p> element:

<p draggable="true" ondragstart="myFunction(event)">Kamata!</p>

Jifunze tena

Makini ya ukurasa una mifano ya TIY zaidi.

Maktaba

Kwenye HTML:

<element ondragstart="myScript">

Jifunze tena

Kwenye JavaScript:

object.ondragstart = function(){myScript};

Jifunze tena

Kwenye JavaScript, tumia methodi addEventListener():

object.addEventListener("dragstart", myScript);

Jifunze tena

Maelezo:Internet Explorer 8 aupele wengi zaidi hauku kufikia addEventListener() method。

Mafanikio ya teknolojia

Inabuburi kwenye mabaki: Inasababisha
Inafaidika kufanyika kufikiria: Inasababisha
Aina ya matukio: DragEvent
Wengineza taja la HTML inayotumika: Wengineza barua ya HTML zote
DOM Version: Matukio ya Level 3

Matumizi ya browser

Mafanikio ya namba kwenye tabia inaeleza sababu ya kwanza kwa kufikiria kwa kawaida kwa browser inayosababu hii matukio

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

Mafanikio mengengineza

Mafanikio ya kusababu na kusababu kwa sababu ya kawaida:

<p draggable="true" id="dragtarget">Sababu nime!</p>
<div class="droptarget">Angalia hapa!</div>
<script>
/* ----------------- Matukio yanayotolewa kwenye kampuni ya kusababu ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData() method seta aina ya data na thamani ya data ya elementi inayosababu
  event.dataTransfer.setData("Text", event.target.id);
  // Kisha kuanza kusababu elementi ya p, kichapisha matukio mbalimbali
  document.getElementById("demo").innerHTML = "Kuanza kusababu elementi ya p.";
  // Kisha kiregula uwezo wa kuzingatia elementi inayotumika kusababu
  event.target.style.opacity = "0.4";
});
// Kisha kusababu elementi ya p, kichapisha mawazo ya chukua mawazo ya rangi
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Kamilifu kusababu elementi ya p kisha kichapisha matukio mbalimbali na kiregula uwezo wa kuzingatia
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Kamilifu kusababu elementi ya p.";
  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 - 防止浏览器对数据的默认处理（默认放置时以链接打开）
Kirekebisha rangia ya matukio na rangia ya DIV
Tumia methodi ya dataTransfer.getData() kusaidia kufikia maudhui ya kusaidia
Maudhui ya kusaidia ni id ya kifaa cha kusaidia ("drag1")
Inaongezwa kwa kusaidia kusaidia kwa kifaa cha 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>

Jifunze tena

Sayari za maudhui

Mafunzo ya HTML: Kusaidia kusaidia kwa HTML5

HTML Mwongozo wa Kifaa: Kifaa cha HTML kwa kusaidia kusaidia

Matukio ya DOM DragEvent