Événement ondragstart

Cours recommandés :

Définition et utilisation

l'événement ondragstart se produit lorsque l'utilisateur commence à glisser un élément ou un texte sélectionné. Glisser-déposer HTML5de notre cours. Le glisser-déposer est une fonctionnalité très courante dans HTML5. Il s'agit de "catcher" un objet et de le déplacer vers un autre emplacement. Pour en savoir plus, lisez notre article sur

Remarque :Pour rendre un élément glissable, utilisez le tutoriel HTML global Attribut draggable HTML5。

Astuce :Par défaut, les liens et les images sont glissables sans l'attribut 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 le glisser-déposer de 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 JavaScript lorsque l'utilisateur commence à glisser le <p> élément :

<p draggable="true" ondragstart="myFunction(event)">Déplacez-moi !</p>

Essayez-le vous-même

Vous trouverez plus d'exemples TIY en bas de la page.

Syntaxe

Dans HTML :

<element ondragstart="myScript">

Essayez-le vous-même

Dans JavaScript :

object.ondragstart = function() {myScript};

Essayez-le vous-même

Dans JavaScript, utilisez la méthode addEventListener() :

object.addEventListener("dragstart", myScript);

Essayez-le vous-même

Remarque :Internet Explorer 8 ou les versions antérieures ne sont pas pris en charge addEventListener() 方法。

技术细节

浏览器支持

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

更多实例

对所有可能的拖放事件的演示：

<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 drop - Empêcher le traitement par défaut du navigateur des données (ouvrir par défaut avec un lien) */
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

Guide de référence HTML : attribut draggable HTML

Boîte à outils

Manuel de référence JavaScript et HTML DOM

Exemples JavaScript

Quiz JavaScript

Tutoriel JavaScript

Liens de sponsors