Drag and drop javascript
-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-