« Drag and drop javascript » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Page créée avec « -Introduction- Javascript permet aussi de faire du drag and drop. Ce tutoriel tente de vous donner quelques bases de ces fonctionnalités. {| class=wikitable width=60... »)
 
(Ajout de la syntaxe du code (partielle, d'autres endroits encore avec syntaxe tableau))
 
(13 versions intermédiaires par 5 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
-Introduction-
{{En construction}}
==Introduction==


Javascript permet aussi de faire du drag and drop. Ce tutoriel tente de vous donner quelques bases de ces fonctionnalités.
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.


 
<source lang="CSS">
{| class=wikitable width=600 align=center
|Animer le texte:
<!DOCTYPE HTML>
<html>
<head>
<style>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
div1 {
    width:350px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}
</style>
</style>
<script>
</source>
 
=== '''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.
<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.
{| class="wikitable" align="center" width="600"
|
function drop(ev) {
function drop(ev) {
     ev.preventDefault();
     ev.preventDefault();
     var data = ev.dataTransfer.getData("text");
     var data = ev.dataTransfer.getData("text");
     ev.target.appendChild(document.getElementById(data));
     ev.target.appendChild(document.getElementById(data));
}
    }
</script>
|}
 
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"
|
  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''':
 
<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
-->
 
    <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>
</head>
<body>
<body>


<p>Drag the W3Schools image into the rectangle:</p>
<!-- 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 -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img alt="votreimage" id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
<br>
    <p>Déplacez l'image dans le cadre:</p>
<img id="drag1" src="img_logo.gif" 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)"></div>


</body>
</body>
</html>
</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&#x22;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 à 16: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.

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Drag_and_drop_javascript&oldid=123483 »