« Drag and drop javascript » : différence entre les versions
Aucun résumé des modifications |
mAucun résumé des modifications |
||
| Ligne 98 : | Ligne 98 : | ||
|} | |} | ||
=Références= | |||
[http://w3schools http://www.w3schools.com/tags/att_script_src.asp] | [http://w3schools http://www.w3schools.com/tags/att_script_src.asp] | ||
Version du 6 décembre 2015 à 16:45
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.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> |