« Drag and drop javascript » : différence entre les versions
| Ligne 15 : | Ligne 15 : | ||
'''Les trois fonctions de javascript''' | '''Les trois fonctions de javascript''' | ||
La '''première''' permet à la fonction d'être | La '''première''' permet à la fonction d'être déplacée (l'événement par défaut est que l'élément ne peut pas être par défaut) | ||
{| class="wikitable" align="center" width="600" | {| class="wikitable" align="center" width="600" | ||
| | | | ||
| Ligne 55 : | Ligne 55 : | ||
<html><br> | <html><br> | ||
<head><br> | <head><br> | ||
<!--La partie style, ci-dessous, | <!--La partie style, ci-dessous, définit la zone où vous pourrez déposer votre image, cette zone est généralement définie dans le CSS --><br> | ||
<title>Draganddrop simple</title><br> | <title>Draganddrop simple</title><br> | ||
<style><br> | <style><br> | ||
| Ligne 63 : | Ligne 63 : | ||
</style><br> | </style><br> | ||
<!-- Les trois fonctions : | <!-- Les trois fonctions : | ||
1) permet à la fonction d'être | 1) permet à la fonction d'être déplacée (l'évenement par défault est que l'élément ne peut pas être par défault) | ||
2) définit le type de données et définit où peut être "lacher" le drop. | 2) définit le type de données et définit où peut être "lacher" le drop. | ||
Version du 16 janvier 2018 à 21:26
Cet article est en construction: un auteur est en train de le modifier.
En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.
Introduction
Javascript permet aussi de faire du drag and drop. Ce tutoriel tente de vous donner quelques bases de ces fonctionnalités. Cet exemple est issu de w3schols auquel des ont été ajoutés pour la compréhension.
La partie style, ci-dessous, définit la zone où vous pourrez déposer votre image, cette zone est généralement définie dans le CSS, mais ici elle est présentée dans un code HTML.
<style>
div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
|
Les trois fonctions de javascript
La première permet à la fonction d'être déplacée (l'événement par défaut est que l'élément ne peut pas être par défaut)
|
function allowDrop(ev) { ev.preventDefault(); } |
La deuxième définit le type de données et définit où peut être "lacher" le drop.
|
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id);
}
|
La troisième définit le type de données et définit où peut être "lacher" le drop.
|
function drop(ev) { ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
|
Vous indiquez à l'ordinateur que l'élément a une propriété de "déplacement" (draggable="true") et que le déplacement commence de lancer la fonction drag(event) définie auparavant
Image que vous voulez faire déplacer <img alt="votreimage" id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> |
Voici enfin l'exemple complet:
| <!DOCTYPE HTML> <html> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body>
Image que vous voulez faire déplacer <img alt="votreimage" id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> |