Événement ondragend
Définition et utilisation
Un événement ondragend se produit lorsque l'utilisateur termine de glisser l'élément ou le texte sélectionné.
Le glisser-déposer est une fonctionnalité très courante dans HTML5. C'est lorsque vous "attrapez" un objet et que vous le glissez à un autre endroit. Pour en savoir plus, lisez notre article sur Glisser-déposer HTML5tutoriel HTML.
Remarque :Pour rendre un élément glissable, utilisez la globale Propriété 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 - Se produit lorsque l'utilisateur commence à glisser l'élément
- ondrag - Se produit lorsque l'élément est glissé
- ondragend - Se produit lorsque l'utilisateur termine de glisser l'élément
Événements déclenchés sur la cible de placement :
- ondragenter - Se produit lorsque l'élément glissé entre dans la cible de placement
- ondragover - Se produit lorsque l'élément glissé est sur la cible de placement
- ondragleave - Se produit lorsque l'élément glissé quitte la cible de placement
- ondrop - Se produit lorsque l'élément glissé est placé sur la cible de placement
Exemple
Exécutez du JavaScript lorsque l'utilisateur termine de glisser le <p> élément :
<p draggable="true" ondragend="myFunction(event)">Tirez-moi !</p>
Vous trouverez plus d'exemples TIY en bas de la page.
Syntaxe
Dans HTML :
<element ondragend="myScript">
Dans JavaScript :
object.ondragend = function() {myScript};
Dans JavaScript, utilisez la méthode addEventListener() :
object.addEventListener("dragend", myScript);
Remarque :Internet Explorer 8 ou versions antérieures ne prennent pas en charge méthode addEventListener()。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragend | 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 glissant p entre dans le 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 le droptarget
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* À la mise en place - Empêcher le traitement par défaut du navigateur des données (ouvrir les liens par défaut 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 dépôt
*/
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>
