ondragstart event

DOM events DragEvent

Definitie en gebruik

De gebeurtenis ondragstart treedt op wanneer de gebruiker een element of tekstselectie begint te slepen.

Slepen en neerzetten is een zeer gebruikelijke functie in HTML5. Dit is wanneer je een object "grijpt" en naar een andere positie sleept. Voor meer informatie, lees ons over HTML5 drag and dropHTML-tutorial.

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

Tip:Standaard zijn links en afbeeldingen sleepbaar zonder de eigenschap draggable.

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

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

  • ondragstart - Wanneer de gebruiker het element begint te slepen, gebeurt dit
  • ondrag - Wanneer het element wordt gesleept, gebeurt dit
  • ondragend - Wanneer de gebruiker het gesleepte element voltooit, gebeurt dit

Gebeurtenissen die op de doelpositie worden geactiveerd:

  • ondragenter - Wanneer het gesleepte element de doelpositie binnenkomt, gebeurt dit
  • ondragover - Wanneer het gesleepte element op de doelpositie is, gebeurt dit
  • ondragleave - Wanneer het gesleepte element de doelpositie verlaat, gebeurt dit
  • ondrop - Wanneer het gesleepte element op de doelpositie wordt geplaatst, gebeurt dit

Voorbeeld

Voer JavaScript uit wanneer de gebruiker een <p>-element begint te slepen:

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

Probeer het zelf

Er zijn meer TIY-exempelen onder de pagina.

Syntax

In HTML:

<element ondragstart="myScript">

Probeer het zelf

In JavaScript:

object.ondragstart = function(){myScript};

Probeer het zelf

In JavaScript, gebruik de methode addEventListener():

object.addEventListener("dragstart", myScript);

Probeer het zelf

Opmerking:Internet Explorer 8 of oudere versies ondersteunen niet addEventListener() 方法。

技术细节

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

浏览器支持

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

事件 Chrome IE Firefox Safari Opera
ondragstart 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 ----------------- */
// Als het drijvende 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 data/elementen niet in andere elementen worden geplaatst. Om plaatsen te permettent, moeten we de standaard verwerking van het element blokkeren
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Als het drijvende 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 de standaard verwerking van de browser voor gegevens (bij standaard plaatsen opent als koppeling)
Herstel de kleur van de uitvoer tekst en de DIV randkleur
Gebruik de methode dataTransfer.getData() om de gedragde gegevens te verkrijgen
De gedragde gegevens zijn de id van het gedragde element ("drag1")
Het te slepen element wordt toegevoegd aan het plaatsingselement
*/
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

Gerelateerde pagina's

HTML Handleiding: HTML5 slepen en neerzetten

HTML Referenties: HTML draggable eigenschap

DOM events DragEvent