Événement ondrop
Definition and Usage
The ondrop event occurs when a draggable element or selected text is placed on a valid drop target.
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 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 and do not require the draggable attribute.
Many events are used at different stages of the drag-and-drop operation, 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.
Example
JavaScript is executed when placing a draggable element in the <div> element:
<div ondrop="myFunction(event)"></div>
More TIY examples are at the bottom of the page.
Syntax
In HTML:
<element ondrop="myScript">
In JavaScript:
object.ondrop = function(){myScript};
In JavaScript, use the addEventListener() method:
object.addEventListener("drop", myScript;
Note:Internet Explorer 8 or earlier versions do not support addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrop | 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 par défaut les liens lors du dépôt) */
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>
