Événement ondragenter
Recommandation de cours :
Définition et utilisation
L'événement ondragenter se produit lorsque l'élément glissant ou le texte sélectionné entre dans une cible de dépose valide.
ondragenter et ondragleave peuvent aider les utilisateurs à comprendre que l'élément glissant va entrer ou quitter la cible de dépose. Par exemple, vous pouvez définir la couleur d'arrière-plan de l'élément lorsque l'élément entre dans la cible et supprimer la couleur lorsque l'élément quitte la cible. Glisser-déposer HTML5du HTML. La fonctionnalité de glisser-déposer est très courante dans HTML5. Cela signifie que lorsque vous "catch" un objet et le faites glisser à un autre endroit. Pour en savoir plus, lisez notre article sur
Remarque :Pour rendre un élément glissable, utilisez le tutoriel global Attribut draggable HTML5。
Astuce :Par défaut, les liens et les images sont glissables sans avoir besoin de la propriété draggable.
À différents stades de l'opération de glisser-déposer, de nombreux événements sont utilisés et peuvent se produire :
Événements déclenchés sur l'élément cible (élément source) :
- ondragstart - Lorsque l'utilisateur commence à glisser l'élément
- ondrag - Lorsque l'élément est glissé
- ondragend - Lorsque l'utilisateur termine le glisser-déposer de l'élément
Événements déclenchés sur la cible de dépose :
- ondragenter - Lorsque l'élément glissant entre dans la cible de dépose
- ondragover - Lorsque l'élément glissant est sur la cible de dépose
- ondragleave - Lorsque l'élément glissant quitte la cible de dépose
- ondrop - Lorsque l'élément glissant est placé sur la cible de dépose
Exemple
Exécutez JavaScript lorsque l'élément glissant entre dans la cible de dépose :
<div ondragenter="myFunction(event)"></div>
Vous trouverez plus d'exemples TIY en bas de la page.
Syntaxe
Dans HTML :
<element ondragenter="myScript">
Dans JavaScript :
object.ondragenter = function(){myScript};
Dans JavaScript, utilisez la méthode addEventListener() :
object.addEventListener("dragenter", myScript);
Remarque :Internet Explorer 8 ou les versions antérieures ne sont pas pris en charge 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";
});
/* ----------------- Événements déclenchés sur le point de dépôt ----------------- */
// Changer le style de bordure du DIV lorsque l'élément p glissable 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 p glissable 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>
