ondragenter event

Definitie en gebruik

Wanneer een daggable element of tekstselectie een geldige doellevering binnenkomt, vindt de gebeurtenis ondragenter plaats.

De gebeurtenissen ondragenter en ondragleave helpen gebruikers te begrijpen dat een daggable element binnenkort de doellevering zal binnenkomen of verlaten. Bijvoorbeeld, je kunt de achtergrondkleur instellen wanneer het daggable element de doellevering binnenkomt en de kleur verwijderen wanneer het element de doel verlaat.

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

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

Tip:Standaard zijn links en afbeeldingen daggable en is de eigenschap draggable niet nodig.

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

Gebeurtenissen die op het daggable doel (bron-element) worden getriggerd:

ondragstart - Wanneer de gebruiker begint met het duwen van het element, gebeurt dit
ondrag - Wanneer het element wordt geduwd, gebeurt dit
ondragend - Wanneer de gebruiker het daggable element voltooit, gebeurt dit

Gebeurtenissen die op de doellevering worden getriggerd:

ondragenter - Wanneer het gedragbare element in de doellevering komt, gebeurt dit
ondragover - Wanneer het gedragbare element op de doellevering wordt geplaatst, gebeurt dit
ondragleave - Wanneer het gedragbare element de doellevering verlaat, gebeurt dit
ondrop - Wanneer het gedragbare element op de doellevering wordt geplaatst, gebeurt dit

Voorbeeld

Voer JavaScript uit wanneer een daggable element in de doellevering wordt geplaatst:

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

probeer het zelf

Er zijn meer TIY-exempelen onder de pagina.

Syntaxis

In HTML:

<element ondragenter="myScript">

probeer het zelf

In JavaScript:

object.ondragenter = function(){myScript};

probeer het zelf

In JavaScript, gebruik de methode addEventListener():

object.addEventListener("dragenter", 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
ondragenter	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 sleepbare 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 in andere elementen worden geplaatst. Om plaatsen te kunnen toestaan, moeten we de standaard verwerking van het element blokkeren
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Als het sleepbare 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 neerzetten wordt geopend als link) */
zet de kleur van de uitvoer tekst en de randkleur van de DIV terug
gebruik de methode dataTransfer.getData() om de gesleepte gegevens te verkrijgen
de gesleepte gegevens zijn het id van het gesleepte element ("drag1")
het element dat wordt gesleept wordt toegevoegd aan het element waarop wordt neergezet
*/
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