ondragenter begivenhed

DOM begivenheder DragEvent

Definition og brug

Når en trækkbar element eller tekstvalg kommer ind i et gyldigt mål, udløses ondragenter-hændelsen.

ondragenter- og ondragleave-hændelser hjælper brugeren med at forstå, at en trækkbar element er ved at komme ind eller forlade målet. For eksempel kan du sætte baggrundsfarve, når elementet kommer ind i målet, og fjerne farven, når elementet forlader målet.

Drag-and-drop er en meget almindelig funktion i HTML5. Det er når du "greber" et objekt og trækker det til en anden placering. For at lære mere, læs vores om HTML5 træk og slipHTML-tutorial.

Bemærkninger:For at gøre et element trækkbart skal du bruge den globale HTML5 draggable-attributten。

Tip:Som standard er links og billeder trækkbare uden at kræve draggable-attributten.

Der bruges mange forskellige hændelser i forskellige faser af en træk-og-slip operation, og der kan ske:

Hændelser, der udløses på trækkbare mål (kildeelement):

  • ondragstart - Når brugeren begynder at trække elementet
  • ondrag - Når elementet trækkes
  • ondragend - Når brugeren afslutter at trække elementet

Hændelser, der udløses på målet:

  • ondragenter - Når den trukne element kommer ind i målet
  • ondragover - Når den trukne element er på målet
  • ondragleave - Når den trukne element forlader målet
  • ondrop - Når den trukne element placeres på målet

Eksempel

Kør JavaScript, når en trækkbar element kommer ind i et mål:

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

Try it yourself

Der er flere TIY-exempler nedenfor på siden.

Syntaks

I HTML:

<element ondragenter="myScript">

Try it yourself

I JavaScript:

object.ondragenter = function(){myScript};

Try it yourself

I JavaScript bruges addEventListener() metoden:

object.addEventListener("dragenter", myScript);

Try it yourself

Bemærkninger:Internet Explorer 8 eller tidligere versioner understøtter ikke 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";
});
/* ----------------- Events triggered on the drop target ----------------- */
// When the draggable p element enters the droptarget, change the DIV border style
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// By default, data/elements cannot be placed in other elements. To allow placement, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIV border style
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - Prevent the browser's default handling of data (default opening as a link when dropped)
Reset the output text color and the DIV border color
Use the dataTransfer.getData() method to get the dragged data
The dragged data is the id of the dragged element ("drag1")
Attach the draggable element to the drop element
*/
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>

Try it yourself

Related pages

HTML tutorial: HTML5 drag and drop

HTML reference manual: HTML draggable attribute

DOM begivenheder DragEvent