Drag and drop javascript
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">
<!-- Définition de la destination de l'élément -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><p>Déplacez l'image ici</p></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.