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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
(Ajout de la syntaxe du code (partielle, d'autres endroits encore avec syntaxe tableau))
 
(11 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.  


Cette exemple est issu de w3schols auquel des  <!-- commentaires--> ont été ajouté pour la compréhension.  
== 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">
<style>
div1 {
    width:350px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}
</style>
</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) {
    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) {
    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"
{| class="wikitable" align="center" width="600"
|<!DOCTYPE HTML><br>
|
    <html><br>
function drop(ev) {
    <head><br>
    ev.preventDefault();
    <!--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 --><br>
    var data = ev.dataTransfer.getData("text");
<title>Draganddrop simple</title><br>
    ev.target.appendChild(document.getElementById(data));
    <style><br>
    }
<br>
|}
        div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}<br>
 
<br>
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.
    </style><br>
 
    <!-- Les trois fonctions :
{| class="wikitable" align="center" width="600"
1) permet à la fonction d'être déplacé (l'évenement par défault est que l'élément ne peut pas être par défault)
|
  Image que vous voulez faire déplacer
    <img alt="votreimage" id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
|}


2) définit le type de données et définit où peut être "lacher" le drop.
Voici enfin l''''exemple complet''':


3) Permet le transfer de donnée lors du drop
<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 38 : Ligne 85 :
    }
    }
    </script>
    </script>
    </head>
</head>
 
    <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 -->
<body>


   Image que vous voulez faire déplacer
<!-- 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>


    </html>
=Références=
|}
 
[http://w3schools http://www.w3schools.com/tags/att_script_src.asp]


-Références-
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


[http://w3schools http://www.w3schools.com/tags/att_script_src.asp]
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 à 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.

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