ondrag gebeurtenis

DOM gebeurtenissen DragEvent

Definitie en gebruik

Het ondrag-evenement vindt plaats wanneer een element of tekstselectie wordt gesleept.

Slepen en neerzetten is een zeer gebruikelijke functie in HTML5. Dit is wanneer je een object "grijpt" en het naar een andere positie sleep. Voor meer informatie, lees onze HTML5 verslepen en neerzettenHTML-tutorial.

Opmerking:Om een element dragbaar te maken, gebruik dan de globale HTML5 draggable-eigenschap。

Tip:Standaard zijn links en afbeeldingen dragbaar zonder de draggable-eigenschap nodig te hebben.

Bij verschillende stadia van het slepen en neerzetten worden veel gebeurtenissen gebruikt en kunnen er optreden:

Gebeurtenissen die op het bron-element (draagbaar doel) worden geactiveerd:

  • ondragstart - Wanneer de gebruiker het element begint te slepen, vindt er een gebeurtenis plaats
  • ondrag - Wanneer het element wordt gesleept, vindt er een gebeurtenis plaats
  • ondragend - Wanneer de gebruiker het gesleepte element voltooit, vindt er een gebeurtenis plaats

Gebeurtenissen die op de doellegger worden geactiveerd:

  • ondragenter - Wanneer het gesleepte element de doellegger binnenkomt, vindt er een gebeurtenis plaats
  • ondragover - Wanneer het gesleepte element op de doellegger staat, vindt er een gebeurtenis plaats
  • ondragleave - Wanneer het gesleepte element de doellegger verlaat, vindt er een gebeurtenis plaats
  • ondrop - Wanneer het gesleepte element op de doellegger wordt geplaatst, vindt er een gebeurtenis plaats

Opmerking:Wanneer een element wordt gesleept, wordt het ondrag-evenement elke 350 milliseconden geactiveerd.

Voorbeeld

Voer JavaScript uit bij het slepen van een <p>-element:

<p draggable="true" ondrag="myFunction(event)">Sleep me!</p>

Probeer het zelf uit

Er zijn meer TIY-exempelen onder de pagina.

Syntaxis

In HTML:

<element ondrag="myScript">

Probeer het zelf uit

In JavaScript:

object.ondrag = function(){myScript};

Probeer het zelf uit

In JavaScript, gebruik de methode addEventListener():

object.addEventListener("drag", myScript);

Probeer het zelf uit

Opmerking:Internet Explorer 8 of eerder ondersteunt niet addEventListener() 方法。

技术细节

冒泡： 支持
可取消： 支持
事件类型： DragEvent
支持的 HTML 标签： 所有 HTML 元素
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
ondrag 4.0 9.0 3.5 6.0 12.0

更多实例

所有可能的拖放事件的演示：

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData()方法设置被拖拽数据的数据类型和值
  event.dataTransfer.setData("Text", event.target.id);
  // 开始拖动 p 元素时输出一些文本
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // 更改可拖动元素的不透明度
  event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});
/* ----------------- Gebeurtenissen die worden getriggerd op het plaatsingsdoel ----------------- */
// Wanneer het dragbare p-element de droptarget binnenkomt, wijzig de randstijl van de DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Standaard kan geen gegevens/elementen worden geplaatst in andere elementen. Om plaatsing toe te staan, moeten we de standaardafhandeling van het element blokkeren
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Wanneer het dragbare p-element de droptarget verlaat, reset de randstijl van de DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Bij neerzetten - voorkom standaard verwerking van de browser voor gegevens (standaard openen als koppeling bij neerzetten)
Reset de kleur van de output tekst en de randkleur van de DIV
Gebruik de methode dataTransfer.getData() om de getrokken data te verkrijgen
De data die wordt getrokken, is de id van het getrokken element ("drag1")
Het element dat wordt getrokken wordt toegevoegd aan het element waarop wordt geplaatst
*/
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>

Probeer het zelf uit

Gerelateerde pagina's

HTML Handleiding:HTML5 verslepen en neerzetten

HTML referentiehandleiding:HTML draggable eigenschap

DOM gebeurtenissen DragEvent