Événement ondrag

Événements DOM DragEvent

Definition and Usage

The ondrag event occurs when an element or text selection is dragged.

Drag-and-drop is a very common feature in HTML5. It is when you "grab" an object and drag it to a different location. For more information, please read our article about Glisser-déposer HTML5HTML tutorial.

Note:To make an element draggable, use the global HTML5 draggable attribute。

Tip:By default, links and images are draggable without the draggable attribute.

Many events are used at different stages of drag-and-drop operations, and may occur:

Events triggered on the draggable target (source element):

  • ondragstart - Occurs when the user starts dragging the element.
  • ondrag - Occurs when the element is dragged.
  • ondragend - Occurs when the user completes dragging the element.

Events triggered on the target:

  • ondragenter - Occurs when the dragged element enters the target.
  • ondragover - Occurs when the dragged element is on the target.
  • ondragleave - Occurs when the dragged element leaves the target.
  • ondrop - Occurs when the dragged element is placed on the target.

Note:The ondrag event is triggered every 350 milliseconds when dragging an element.

Example

Execute JavaScript when dragging the <p> element:

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

Essayez-le vous-même

More TIY examples are at the bottom of the page.

Syntax

In HTML:

<element ondrag="myScript">

Essayez-le vous-même

In JavaScript:

object.ondrag = function(){myScript};

Essayez-le vous-même

In JavaScript, use the addEventListener() method:

object.addEventListener("drag", myScript);

Essayez-le vous-même

Note:Internet Explorer 8 or earlier versions do not support 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";
});
/* ----------------- Événements déclenchés sur la cible de placement ----------------- */
// Changer le style de bordure du DIV lorsque l'élément glissant p entre dans droptarget
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Par défaut, les données/éléments ne peuvent pas être placés dans d'autres éléments. Pour permettre le placement, nous devons empêcher le traitement par défaut de l'élément
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Réinitialiser le style de bordure du DIV lorsque l'élément glissant p quitte droptarget
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Sur le dépôt - Empêcher le traitement par défaut du navigateur des données (ouvrir les liens par défaut) */
Réinitialiser la couleur du texte de sortie et la couleur de bordure du DIV
Obtenir les données glissées en utilisant la méthode dataTransfer.getData()
Les données glissées sont l'ID de l'élément glissé ("drag1")
Ajouter l'élément glissé à l'élément de destination
*/
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>

Essayez-le vous-même

Pages associées

Tutoriel HTML :Glisser-déposer HTML5

Manuel de référence HTML :Attribut draggable HTML

Événements DOM DragEvent