« Drag and drop javascript » : différence entre les versions
(Ajout de la syntaxe du code (partielle, d'autres endroits encore avec syntaxe tableau)) |
|||
| (6 versions intermédiaires par 4 utilisateurs non affichées) | |||
| 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. Le "drag and drop" est une technique d'interaction entre l'utilisateur d'une page HTML et certains éléments de cette page. Le développeur Burmistrov (2016) remarque que la population ciblée doit être tenue en compte avant d'utiliser le "drag-en-drop". Des soucis de coordination et fatigue sont possibles pour les enfants et les personnes agées. Les enfants avec de troubles comme la dyspraxie peuvent aussi trouver la manipulation de la souris assez difficile. Selon la recherche d'Inkpen (2001), tant les adultes comme les enfants participant de leur étude ont montré une préférence pour le "point-and-click", comme manière d'interaction. Les interactions ont été plus vite, il y a eu moins d'erreurs, et les enfants surtout ont été plus motivés à jouer/travailler. Du côté de l'interface, le "drag-and-drop" est aussi plus difficile et fatigant pour les utilisateurs des ordinateurs avec un touchpad. | ||
== Tutoriel == | |||
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. | ||
<source lang="CSS"> | |||
<style> | |||
div1 { | |||
width:350px; | |||
height:70px; | |||
padding:10px; | |||
border:1px solid #aaaaaa; | |||
} | |||
</style> | |||
</source> | |||
La '''première''' permet à la fonction d'être | === '''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). | |||
<source lang="JavaScript"> | |||
function allowDrop(ev) { | function allowDrop(ev) { | ||
ev.preventDefault(); | ev.preventDefault(); | ||
} | |||
</source> | |||
La '''deuxième''' définit le type de données et définit où peut être "lacher" le drop. | La '''deuxième''' définit le type de données et définit où peut être "lacher" le drop. | ||
<source lang="JavaScript"> | |||
function drag(ev) { | function drag(ev) { | ||
ev.dataTransfer.setData("text", ev.target.id); | ev.dataTransfer.setData("text", ev.target.id); | ||
} | |||
</source> | |||
La '''troisième''' définit le type de données et définit où peut être "lacher" le drop. | La '''troisième''' définit le type de données et définit où peut être "lacher" le drop. | ||
{| class="wikitable" align="center" width="600" | {| class="wikitable" align="center" width="600" | ||
| Ligne 40 : | Ligne 45 : | ||
|} | |} | ||
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" | ||
| Ligne 51 : | Ligne 55 : | ||
Voici enfin l''''exemple complet''': | Voici enfin l''''exemple complet''': | ||
<source lang="html"> | |||
<!DOCTYPE HTML> | |||
<html lang="fr"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Drag and drop simple</title> | |||
<!--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 --> | |||
<style>#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style> | |||
<!-- Les trois fonctions : | |||
1) permet à la fonction d'être déplacée (l’évènement 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 "lâché" le drop. | |||
3) Permet le transfert de donnée lors du drop | |||
--> | --> | ||
| Ligne 84 : | Ligne 85 : | ||
} | } | ||
</script> | </script> | ||
</head> | |||
<body> | |||
<!-- Vous indiquez que l'élément a une propriété de "déplacement" (draggable="true" et que le déplacement lance la fonction drag(event) définie auparavant --> | |||
<!-- Image que vous voulez 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"> | ||
<p>Déplacez l'image dans le cadre:</p> | |||
<!-- Définition de la destination de l'élément --> | |||
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |||
</body> | </body> | ||
</html> | |||
</source> | |||
=Références= | =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] | ||
Burmistrov, (2016) A. "[https://icons8.com/articles/drag-and-drop-vs-click-are-they-rivals-usability-studies-revealed/ Drag and Drop v. Clicks - Are they Rivals? Usability Studies Revealed]" in icon8.com | |||
Inkpen, K. "[https://www.cise.ufl.edu/research/lok/teaching/hci-f07/papers/inkpen.pdf"Drag-and-Drop Drag-and-Drop versus Point-and-Click Mouse Interaction Styles for Children]" (2001) in ACM Transactions on Computer-Human Interaction, Vol. 8, No. 1. | |||
Dernière version du 2 février 2020 à 15:50
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. Le "drag and drop" est une technique d'interaction entre l'utilisateur d'une page HTML et certains éléments de cette page. Le développeur Burmistrov (2016) remarque que la population ciblée doit être tenue en compte avant d'utiliser le "drag-en-drop". Des soucis de coordination et fatigue sont possibles pour les enfants et les personnes agées. Les enfants avec de troubles comme la dyspraxie peuvent aussi trouver la manipulation de la souris assez difficile. Selon la recherche d'Inkpen (2001), tant les adultes comme les enfants participant de leur étude ont montré une préférence pour le "point-and-click", comme manière d'interaction. Les interactions ont été plus vite, il y a eu moins d'erreurs, et les enfants surtout ont été plus motivés à jouer/travailler. Du côté de l'interface, le "drag-and-drop" est aussi plus difficile et fatigant pour les utilisateurs des ordinateurs avec un touchpad.
Tutoriel
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 lang="fr">
<head>
<meta charset="UTF-8">
<title>Drag and drop simple</title>
<!--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 -->
<style>#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style>
<!-- Les trois fonctions :
1) permet à la fonction d'être déplacée (l’évènement 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 "lâché" le drop.
3) Permet le transfert de donnée lors du drop
-->
<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>
<!-- Vous indiquez que l'élément a une propriété de "déplacement" (draggable="true" et que le déplacement lance la fonction drag(event) définie auparavant -->
<!-- Image que vous voulez déplacer -->
<img alt="votreimage" id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
<p>Déplacez l'image dans le cadre:</p>
<!-- Définition de la destination de l'élément -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Références
http://www.w3schools.com/tags/att_script_src.asp
Burmistrov, (2016) A. "Drag and Drop v. Clicks - Are they Rivals? Usability Studies Revealed" in icon8.com
Inkpen, K. "Drag-and-Drop versus Point-and-Click Mouse Interaction Styles for Children" (2001) in ACM Transactions on Computer-Human Interaction, Vol. 8, No. 1.