Zdarzenie ondragover

Zdarzenia DOM DragEvent

Definicja i użycie

Zdarzenie ondragover występuje, gdy przeciągany element lub wybrany tekst jest przeciągany na ważny punkt umieszczenia.

Domyślnie, nie można usuwać danych/elementów w innych elementach. Aby umożliwić umieszczanie, musimy zablokować domyślne przetwarzanie elementu. To się realizuje poprzez wywołanie metody event.preventDefault() zdarzenia ondragover.

Przeciąganie i upuszczanie to bardzo powszechna funkcja w HTML5. Oznacza to, że gdy "chwytasz" obiekt i przeciągasz go na różne miejsca. Aby dowiedzieć się więcej, przeczytaj nasze informacje o Przenoszenie HTML5wykładu HTML.

Komentarz:Aby uczynić element przeciągalnym, użyj globalnego Atrybut draggable w HTML5。

Wskazówka:Domyślnie, linki i obrazy są przeciągane, nie wymaga się atrybutu draggable.

W różnych etapach operacji przeciągania i upuszczania używane jest wiele zdarzeń i mogą się one zdarzyć:

Zdarzenia wywoływane na elemencie źródłowym (cel przeciągania):

  • ondragstart - gdy użytkownik zaczyna przeciągać element
  • ondrag - gdy element jest przeciągany
  • ondragend - gdy użytkownik kończy przeciąganie elementu

Zdarzenia wywoływane na punkcie umieszczenia:

  • ondragenter - gdy przeciągany element wchodzi w punkt umieszczenia
  • ondragover - gdy przeciągany element znajduje się na punkcie umieszczenia
  • ondragleave - gdy przeciągany element odchodzi od punktu umieszczenia
  • ondrop - gdy przeciągany element jest umieszczany na punkcie umieszczenia

Komentarz:Podczas przeciągania elementu, zdarzenie ondragover wywoływane jest co 350 milisekund.

Przykład

Wykonaj JavaScript, gdy element jest przeciągany na docelowy punkt umieszczenia:

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

Try it yourself

Poniżej znajdują się więcej przykładów TIY.

Gramatyka

W HTML:

<element ondragover="myScript">

Try it yourself

W JavaScript:

obiekt.ondragover = function(){myScript};

Try it yourself

W JavaScript, używając metody addEventListener():

obiekt.addEventListener("dragover", myScript);

Try it yourself

Komentarz:Internet Explorer 8 lub wcześniejsze wersje nie obsługują addEventListener() 方法。

技术细节

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

浏览器支持

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

事件 Chrome IE Firefox Safari Opera
ondragover 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 border style of the DIV
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 border style of the DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - prevent the browser's default handling of data (open with link by default when dropped) */
Reset the color of the output text and the border color of the DIV
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 referency manual: HTML draggable attribute

Zdarzenia DOM DragEvent