« Drag and drop javascript » : différence entre les versions
(Corrigé des petites fautes) |
|||
| Ligne 2 : | Ligne 2 : | ||
==Introduction== | ==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 | 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 w3schools auquel des commentaires <!-- commentaires--> 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. | 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. | ||
| Ligne 39 : | Ligne 39 : | ||
} | } | ||
|} | |} | ||
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 | ||
| Ligne 70 : | Ligne 69 : | ||
--> | --> | ||
<script> | <script> | ||
function allowDrop(ev) { | function allowDrop(ev) { | ||
| Ligne 88 : | Ligne 86 : | ||
<body> | <body> | ||
<!-- 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 --> | <nowiki> </nowiki><!-- 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 | ||
Image que vous voulez faire déplacer | |||
<img alt="votreimage" id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> | <img alt="votreimage" id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> | ||
Version du 25 janvier 2018 à 18:05
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 w3schools auquel des commentaires 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> <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> |