« Drag and drop javascript » : différence entre les versions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 13 : | Ligne 13 : | ||
|} | |} | ||
'''Les trois fonctions de javascript''' | '''Les trois fonctions de javascript''' | ||
La '''première''' permet à la fonction d'être déplacé (l'évenement par défault est que l'élément ne peut pas être par défault) | La '''première''' permet à la fonction d'être déplacé (l'évenement par défault est que l'élément ne peut pas être par défault) | ||
{| class="wikitable" align="center" width="600" | {| class="wikitable" align="center" width="600" | ||
| Ligne 31 : | Ligne 32 : | ||
{| class="wikitable" align="center" width="600" | {| class="wikitable" align="center" width="600" | ||
| | | | ||
function drop(ev) { | |||
ev.preventDefault(); | ev.preventDefault(); | ||
var data = ev.dataTransfer.getData("text"); | var data = ev.dataTransfer.getData("text"); | ||
| Ligne 39 : | Ligne 40 : | ||
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 | 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 | ||
{| class="wikitable" align="center" width="600" | {| class="wikitable" align="center" width="600" | ||
Version du 6 décembre 2015 à 13:09
-Introduction-
Javascript permet aussi de faire du drag and drop. Ce tutoriel tente de vous donner quelques bases de ces fonctionnalités.Cette exemple est issu de w3schols auquel des ont été ajouté pour la compréhension.
La partie style, ci-dessous, défini la zone où vous pourrez déposer votre image, cette zone est généralement défini dans le CSS, mais ici elle est présenté 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é (l'évenement par défault est que l'élément ne peut pas être par défault)
|
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> |
-Références-