ondragstart 事件

Pangalagaan at paggamit

Ang ondragstart na kaganapan ay nangyayari kapag nagsisimula ang user ang paggalaw ng elemento o pagpipilian ng teksto.

Ang paggalaw at paglalagay ay isang napakapangkaraniwang paraan sa HTML5. Ito ay kapag kaagad kaagad mo magkatagpo ng isang bagay at idalhin ito sa iba't ibang posisyon. Upang matuto ng mas marami, basahin ang aming mga kurso tungkol sa HTML5 拖放HTML tutorial.

Komentaryo:Upang gawing maagaw ang elemento, gamit ang pangkalahatang HTML5 draggable attribute.

Mga payo:Bilang default, ang mga link at ang mga imahe ay maagaw, hindi kailangan ng draggable na attribute.

Sa iba't ibang yugto ng paggalaw at paglalagay, maraming kaganapan ang ginagamit at maaaring mangyari:

Mga kaganapan na nangyayari sa target na maagaw:

  • ondragstart - Nangyayari kapag nagsisimula ang user ang paggalaw ng elemento
  • ondrag - Nangyayari kapag ang elemento ay inililipat
  • ondragend - Nangyayari kapag natapos ng user ang paggalaw ng elemento

Mga kaganapan na nangyayari sa target na paglalagay:

  • ondragenter - Nangyayari kapag ang inililipat na elemento ay pumasok sa target na paglalagay
  • ondragover - Nangyayari kapag ang inililipat na elemento ay nasa target na paglalagay
  • ondragleave - Nangyayari kapag ang inililipat na elemento ay inalis sa target na paglalagay
  • ondrop - Nangyayari kapag ang inililipat na elemento ay ilagay sa target na paglalagay

Halimbawa

Ipatupad ang JavaScript kapag nagsisimula ang gumagalaw ng <p> elemento ng user:

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

亲自试一试

May mas maraming TIY na halimbawa sa ibaba ng pahina.

Gramata

Sa HTML:

<element ondragstart="myScript">

亲自试一试

Sa JavaScript:

object.ondragstart = function(){myScript};

亲自试一试

Sa JavaScript, gamit ang addEventListener() na paraan:

object.addEventListener("dragstart", myScript);

亲自试一试

Komentaryo:Internet Explorer 8 o ang mas maagang bersiyon ay hindi sumusuporta addEventListener() method.

Detalye ng teknolohiya

Bububong: Suportado
Maaaring kanselahin: Suportado
Uri ng kaganapan: DragEvent
Suportadong HTML tag: Lahat ng HTML element
DOM bersyon: Level 3 Events

Suporta ng browser

Ang mga numero sa talahanayan ay nagtutukoy sa unang bersyon ng browser na ganap na sumusuporta sa kaganapan.

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

Higit pang mga halimbawa

Mga halimbawa ng lahat ng posibleng kaganapan ng pag-drag at pag-i-drop:

<p draggable="true" id="dragtarget">I-drag ko!</p>
<div class="droptarget">Mag-i-drop dito!</div>
<script>
/* ----------------- Ang mga kaganapan na nangyari sa layunin ng pag-drag ----------------- */
document.addEventListener("dragstart", function(event) {
  // Ang method na dataTransfer.setData() ay nag-set ng uri ng data at ang halaga ng na-drag na data
  event.dataTransfer.setData("Text", event.target.id);
  // Pagkatapos ng pag-drag ang p element, i-output ang ilang teksto
  document.getElementById("demo").innerHTML = "Nagsimula ang pag-drag ng p element.";
  // I-change ang transparency ng draggable na element
  event.target.style.opacity = "0.4";
});
// Pagkatapos ng pag-drag ang p element, i-change ang kulay ng i-output na teksto
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Pagkatapos na i-drag ang p element, i-output ang ilang teksto at i-reset ang transparency
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Natapos na i-drag ang 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>

亲自试一试

相关页面

HTML 教程:HTML5 拖放

HTML 参考手册:HTML draggable 属性