Drag and drop javascript

De EduTech Wiki
Aller à la navigation Aller à la recherche

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 w3schols auquel des 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>
    <head>
   
<title>Draganddrop simple</title>
    <style>

        div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

    </style>
   

    <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>

   

   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>

Références

http://www.w3schools.com/tags/att_script_src.asp