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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 3 : Ligne 3 :
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. Ce tutoriel tente de vous donner quelques bases de ces fonctionnalités.


Cette exemple est issu de w3schols auquel des  <!-- commentaires--> ont été ajouté pour la compréhension.


{| class="wikitable" align="center" width="600"
|<!DOCTYPE HTML><br>
    <html><br>
    <head><br>
    <!--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>
<title>Draganddrop simple</title><br>
    <style><br>
<br>
        div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}<br>
<br>
    </style><br>
    <!-- Les trois fonctions :
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)


2) définit le type de données et définit où peut être "lacher" le drop.


{| class=wikitable width=600 align=center
3) Permet le transfer de donnée lors du drop
|Drag and drop simple:
:<!DOCTYPE HTML>
:<html>
:<head>
:<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>


:<p>Drag the W3Schools image into the rectangle:</p>
-->


:<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <script>
:<br>
    function allowDrop(ev) {
:<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    ev.preventDefault();
:</body>
    }
:</html>
    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 à 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">
 
</body>
 
    </html>
|}
|}


Version du 6 décembre 2015 à 13:53

-Introduction-

Javascript permet aussi de faire du drag and drop. Ce tutoriel tente de vous donner quelques bases de ces fonctionnalités.

Cette exemple est issu de w3schols auquel des ont été ajouté pour la compréhension.

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

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